image不变形 - 图片填满css




在后台拉伸和缩放CSS图像-仅限CSS (12)

我希望我的背景图像可以根据浏览器视口大小进行拉伸和缩放。

我已经看到了Stack Overflow的一些问题,比如拉伸和缩放CSS背景 。 它运作良好,但我想要使用background放置图像,而不是使用img标记。

在那一个img标签被放置,然后用CSS我们致敬img标签。

width:100%; height:100%;

它的工作原理,但这个问题有点老,并指出在CSS 3调整背景图像将工作得很好。 我已经尝试了第一个例子 ,但它并没有为我工作。

有没有一种好的方法来处理background-image声明?


CSS3有一个很好的小属性叫做background-size:cover

这会缩放图像,使背景区域完全被背景图像覆盖,同时保持纵横比。 整个区域将被覆盖,但如果调整大小的图像的宽度/高度太大,则图像的一部分可能不可见


CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

为了根据容器大小适当地缩放图像,请执行以下操作:

{
background-size:contain;
background-repeat: no-repeat;
}

你可以使用CSS3属性来做得很好。 它调整比例,所以没有图像失真(虽然它确实高档的小图像)。 请注意,它尚未在所有浏览器中实现。

background-size: 100%;

使用Backstretch插件。 人们甚至可以放映几张图片。 它也在容器中工作。 例如,通过这种方式,只能将一部分背景覆盖背景图像。

因为即使我能够得到它的工作证明它是一个易于使用的插件:)。


使用我提到的代码 ...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

这产生了预期的效果:只有内容会滚动,而不是背景。

背景图像调整为浏览器视口的任何屏幕大小。 当内容不适合浏览器视口,并且用户需要滚动页面时,背景图像在内容滚动时保持固定在视口中。

用CSS 3看起来会更容易一些。


您可以使用border-image : yourimage属性将图像缩放到边界,即使您提供了背景图像,边框图像也会被绘制在其上。

如果您的样式表实现在某个不支持CSS3的地方,border-image属性非常有用。 如果您使用的是Chrome浏览器的Chrome,那么我建议使用background-size:cover属性。


您可以使用img标签实际获得与背景图像相同的效果。 您只需将z-index设置为低于其他值,设置position:absolute并为前景中的每个框使用透明背景。


我使用它,它适用于所有浏览器:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>

我同意100%宽度和高度的绝对div中的图像。 确保在CSS中为身体设置了100%的宽度和高度,并将边距和填充设置为零。 使用此方法可以发现另一个问题,即选择文本时,选择区域有时可能包含背景图像,这会使完整页面具有选定状态的不幸效果。 你可以通过使用user-select:none CSS规则来解决这个问题,就像这样:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

同样,Internet Explorer在这里也是坏人,因为它无法识别用户选择选项 - 即使Internet Explorer 10预览也不支持它,所以您可以选择使用JavaScript来阻止背景图像选择(例如, http://www.felgall.com/jstip35.htm )或使用CSS 3背景拉伸方法。

另外,对于SEO我会将背景图片放在页面的底部,但是如果背景图片加载时间过长(即最初使用白色背景),则可以移动到页面的顶部。



谢谢!

但之后它不适用于谷歌浏览器Safari浏览器(拉伸工作,但图片的高度只有2毫米!) ,直到有人告诉我缺乏:

尝试设置height:auto;min-height:100%;

所以改变你的height:100%; 线,给出:

#### #background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    width:100%;
    height:auto;
    min-height:100%;
}

就在新添加的代码之前,我在Drupal Tendu主题style.css有这个代码:

html,body {height:100%;}

#page {背景:#FFFFFF; 高度:自动!重要;高度:100%;最小高度:100%;位置:相对;}

然后,我必须在Drupal中添加一个新的块,并添加class=stretch

<img alt =“”class =“stretch”src =“pic.url”/>

只需用该Drupal块中的编辑器复制图片即可; 必须将编辑器更改为非格式文本。





background