Html 响应式网页设计和调整图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12044801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive web design and resizing images
提问by Dexter Schneider
Repsonsive web design works great on most html elements excepts images.I find it a mess. When resizing viewports, you cannot use resizing percentages on an image since it will take on the parent element width and height right. You need to set fixed widths and heights for images...Or am I missing something?
响应式网页设计在大多数 html 元素上效果很好，除了图像。我觉得它一团糟。调整视口大小时，您不能在图像上使用调整大小百分比，因为它会占用父元素的宽度和高度。您需要为图像设置固定的宽度和高度...或者我错过了什么？
So how exactly do you do a responsive design involving images whose container element/parent will stretch above its native width and shrink below its native width?
那么，您究竟如何进行响应式设计，其中包含容器元素/父元素将超出其原始宽度并收缩到其原始宽度以下的图像？
Thank you
谢谢
回答by Billy Moat
The done thing in responsive design is to set this in your css for images and some other elements:
响应式设计中所做的事情是在你的 css 中为图像和其他一些元素设置它：
img, embed, object, video {
max-width:100%;
height:auto;
}
Then in your html the image simply takes up the size of it's container.
然后在您的 html 中，图像仅占用其容器的大小。
You do not set the image size itself you just let it grow/shrink itself.
您无需自行设置图像大小，而只是让它自行增长/缩小。
回答by sheriffderek
well - you can write: .selector img{width: 100%; height: auto;} and then use the size of the div it is in to determine it's scale. or you can also set the image as a background and use similar methods and maybe even mess around with background-size: cover. i'll make a jsfiddle...
好吧 - 你可以写： .selector img{width: 100%; height: auto;} 然后使用它所在的 div 的大小来确定它的比例。或者您也可以将图像设置为背景并使用类似的方法，甚至可以使用 background-size:cover。我会做一个jsfiddle...
.image-w img {
display: block;
width: 100%;
height: auto;
}
回答by Sherwood Botsford
What I have done on my site is this:
我在我的网站上所做的是：
page stuff....
页面内容....
div class=picr>
img src="/Images/Home/MountainPine.jpg" alt="Mountain Pine" id="mountainpine" >
<p>Caption about mountain pine</p>
/div>
Then in CSS
然后在 CSS
pic, pic6 {
float: left;
}
...
.pic, .picr {
width: 37%;
}
#content img {
width: 100% ;
}
So the div class is styled, and the picture is set to fill it. By using the div, then I can also style
这样div类就被样式化了，图片设置为填充。通过使用 div，我还可以设置样式
within the .pic classes to be distinctive from the body text.
在 .pic 类中以区别于正文。
