Html 在移动平台上使图像适合 100% 宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18564985/
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
Have image fit 100% width on mobile platforms
提问by benny
so I am currently implementing a mobile version to my website and everything is fine except I want to be able make it so the image will fill 100% width of the screen whether the user tuns it horizontally or vertically. The image fits 100% like normal on any non-based mobile platform, but does not on a mobile device. Any suggestions?
所以我目前正在为我的网站实施移动版本，一切都很好，除了我希望能够使图像填充屏幕的 100% 宽度，无论用户是水平还是垂直调整它。图像 100% 适合任何非基于移动平台的正常情况，但不适用于移动设备。有什么建议？
I currently am using
我目前正在使用
.blog{
padding:10px;
border-bottom:2px solid #eeeeee;
padding:10px;
background:#ececec;
}
.blog-img{
text-align:left;
width:100%;
margin:0 auto;
padding:10px 0 5px 0;
}
I've also tried:
我也试过：
min-width:100%;
回答by Josh Crozier
The image fits 100% like normal on any non-based mobile platform, but does not on a mobile device.
图像 100% 适合任何非基于移动平台的正常情况，但不适用于移动设备。
It is not working as expected because you are giving the parent element .blog-imga width of 100%.
它没有按预期工作，因为您给父元素.blog-img的宽度为100%.
You need to directly target the nested imgdescendant element and give it a width of 100%:
您需要直接定位嵌套的img后代元素并为其指定宽度100%：
.blog-img img {
height: auto;
width: 100%;
}
Depending on what you're trying to achieve, setting a min-widthof 100%may be better in certain cases.
这取决于你想要达到的目的，设置min-width的100%可能是更好的在某些情况下。
.blog-img img {
height: auto;
min-width: 100%;
}
- Using
width: 100%will stretch theimgelement to a width of100%. - Using
max-width: 100%will increase the width of theimgelement to the maximum total width of theimgresource. In other words, this will prevent theimgelement from being stretched larger than it actually is.
- 使用
width: 100%会将img元素拉伸到宽度100%。 - 使用
max-width: 100%会将img元素的宽度增加到img资源的最大总宽度。换句话说，这将防止img元素被拉伸得比实际更大。
Here is an minimal example highlighting the difference:
这是一个突出差异的最小示例：
<p>Using <code>max-width: 100%</code></p>
<img style="max-width: 100%;" src="http://placehold.it/50" />
<p>Using <code>width: 100%</code></p>
<img style="width: 100%;" src="http://placehold.it/50" />Since you're optimizing your site for mobile browsers, be sure to set a viewport meta tag:
由于您正在针对移动浏览器优化您的网站，请务必设置视口元标记：
<meta name="viewport" content="width=device-width, initial-scale=1">
回答by Borsn
How about this, add the image you want, as a background of a DIV or the document's BODY.
怎么样，添加你想要的图像，作为 DIV 或文档的 BODY 的背景。
If you decide to go with a DIV, width: 100%;, height: 100%;and you can also include z-index, if you wish to go above or behind some content.
如果您决定使用 DIV，则宽度：100%；，高度：100%；并且您还可以包含z-index，如果您希望在某些内容之上或之后。
{
background-image: url(http://arianapierce.com/wp-content/uploads/2010/11/simple-lights-twitter-background.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
I would also suggest you include viewport in your HTML, it makes the page much more stable.
我还建议您在 HTML 中包含视口，它使页面更加稳定。
