Question

我正在尝试在浏览器的高度和宽度填充div中创建一个图像，并希望图像缩放以适应，它当前是拉伸的。我想像通常使用背景图像一样使用图像。在这种情况下我不能因为它使用HTML ID进行切换

我的CSS

    .cover{
    position: relative;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    display:block; 
    margin: 0 auto;
 }

我的HTML

<div class="cover" id="1">
    <img class="cover" src="Images/Articles/Index/MRD%2008-041.jpg">


   <a href="Articles/boy.html"> 
   <span class="title">The Next Generation of Film<br>is in Our Own Backyard</span></a>

   <span class="post"> North Toronto sees yet another high budget Disney movie Filmed on     it's grounds.</span>
 </div>

和jsfiddle for good measure。再次，如何在不拉伸图像的情况下使图像填充浏览器窗口的高度和宽度？谢谢

Answer 1

使用background-image通过CSS显示您的图片，并应用额外的属性background-size以使其填充容器。

这是fiddle。

HTML

<div class="cover" id="1">
    <a href="Articles/boy.html"> 
       <span class="title">The Next Generation of Film<br>is in Our Own Backyard</span>
   </a>
</div>

CSS

// Required to allow the .cover container to fill the entire window. min-height could do the trick too depending on your wishes
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

.cover {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    background: url('http://placehold.it/550x300') no-repeat center center;
    background-size: cover;
}

Answer 2

我建议您使用background-image代替<img>代码。

对于动态大小的图像，

<img>不是一个好选择，CSS会做得更好。

背景尺寸

CSS3支持background-size，cover和contain的两个新值。

来自MDN background-size：

盖

此关键字指定应将背景图像缩放到尽可能小，同时确保其尺寸大于或等于背景定位区域的相应尺寸。

包含

此关键字指定应将背景图像缩放到尽可能大，同时确保其尺寸小于或等于背景定位区域的相应尺寸。

如何获得浏览器窗口的div填充宽度和高度，而不是拉伸图像

2 个答案:

背景尺寸