我怎样才能在一个div响应的图像？

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

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

例如，假设您的图像在1400px宽的文档中具有1210px x 618px的自然尺寸。在1400像素以下，文档将变得流畅。计算图像占文档百分比的宽度很容易：（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>