Repsonsive网页设计在大多数html元素上运行得很好，除了图像。我觉得它很乱。调整视口大小时，不能在图像上使用调整大小百分比，因为它将采用父元素的宽度和高度。你需要为图像设置固定的宽度和高度......或者我错过了什么？
那么你究竟如何做一个响应式设计，其中包含容器元素/父级将超出其原始宽度并缩小到其原始宽度以下的图像？
谢谢
Repsonsive网页设计在大多数html元素上运行得很好，除了图像。我觉得它很乱。调整视口大小时，不能在图像上使用调整大小百分比，因为它将采用父元素的宽度和高度。你需要为图像设置固定的宽度和高度......或者我错过了什么？
那么你究竟如何做一个响应式设计，其中包含容器元素/父级将超出其原始宽度并缩小到其原始宽度以下的图像？
谢谢
响应式设计中完成的事情是在css中为图像和其他一些元素设置：
img, embed, object, video {
max-width:100%;
height:auto;
}
然后在你的HTML中，图像只占用它的容器大小。
您没有设置图像大小本身，只是让它自己增长/缩小。
响应式设计中完成的事情是在css中为图像和其他一些元素设置：
img, embed, object, video {
max-width:100%;
height:auto;
}
然后在你的HTML中，图像只占用它的容器大小。
您没有设置图像大小本身，只是让它自己增长/缩小。
好吧 - 你可以写：.selector img {width：100％; height：auto;}然后使用它所在的div的大小来确定它的比例。或者您也可以将图像设置为背景并使用类似的方法，甚至可能会使用背景大小：封面。我会做一个jsfiddle ......
.image-w img {
display: block;
width: 100%;
height: auto;
}
我在我的网站上所做的是：
页面的东西....
div class=picr>
img src="/Images/Home/MountainPine.jpg" alt="Mountain Pine" id="mountainpine" >
<p>Caption about mountain pine</p>
/div>
然后在CSS中
pic, pic6 {
float: left;
}
...
.pic, .picr {
width: 37%;
}
#content img {
width: 100% ;
}
所以div类是样式化的，图片设置为填充它。通过使用div，我也可以设计风格
在.pic类中，与正文相区别。