Question

我想要的是在浏览器窗口缩放时图像缩小。将它作为背景图像是一个更好的解决方案吗？

#home-feature5 {
    height:618px; 
    width:1210px; 
    position:relative;
}
.photo {
    bottom: 37px;
    position: absolute;
    z-index: 1;
    left: 20px;
}

.photo img {
    max-width:100%;
    height:auto;
}

.bg {
    background-color:#f88b5c; 
    width:100%;
    height:95px;
    bottom:0; 
    left:0;
    position:absolute;  
}

小提琴：http://jsfiddle.net/9LLr7m6w/

Answer 1

我认为你应该让整个网站做出回应：

#home-feature5 {
height:618px; 
width:1210px; 
position:relative;
max-width: 100%;

}

fiddle

Answer 2

将图像的width属性设置为百分比，而不是修复它。这样做，它应该能够相应地扩展。

例如，假设您在1400px宽的文档中拥有自然大小为1210像素x 618像素的图像。低于1400px，文件将是流动的。计算图像占据文档宽度的百分比很容易：（1210/1400）×100 = 86.43％

Answer 3

当我希望图像缩小到页面时，我会做这样的事情。

body{
  width=100%;
}
#home-feature5 {
    height:618px; 
    width:1210px;      //might want to change this to a percentage 
    position:relative;
}
.photo {
    position: absolute;
    left: 20px;
    width:50%;         //the div will be 50% of its container (#home-feature5)
}
.photo img {
    width:100%;        // will be 100% of its container (.photo)  
}

<!-- with html something like this -->

<div id="#home-feature5">
  <div class="photo">
    <img alt="whatever missing" src="whatever.png">
  </div>
</div>

如何在div响应中制作图像？

3 个答案: