媒体查询中宽度为 100% 的图像答案

【问题标题】：Image with 100% width in Media Queries媒体查询中宽度为 100% 的图像
【发布时间】：2013-04-09 00:19:24
【问题描述】：

我在一个宽度为 820 像素的 div 中有一个宽度为 100% 的图像。当我将图像缩小到 iPad 和 iPhone 5 的屏幕尺寸时，图像会缩小到，但在那个尺寸下，我希望图像是屏幕尺寸宽度的 100%。

我已经尝试在媒体查询中使用 100% 的宽度，但图像从未缩放到全宽。

在平板电脑和智能手机中，哪种方法最适合使图像具有全屏宽度？考虑到我使用的是最大宽度为 960px 的网格（骨架网格：http://www.getskeleton.com/）

谢谢。

【问题讨论】：

【解决方案1】：

宽度为 100% 的图像将是其父级的 100% 宽度。所以是的，如果父级是 820px 宽，那么这就是图像的宽度。如果父级是 960px 宽，那么这就是图像的宽度。

因此，您需要在媒体查询中更改父 div 的宽度（可能与您将图像设置为 100% 宽度相同）。

【讨论】：

所以考虑到我在 hmtl 中有这个结构：
，而且只有
没有'没有定义宽度，我需要更改媒体查询中 2 个 div 和 img 的宽度吗？我也改变宽度或最大宽度？
没错。通常当我缩小到移动尺寸时，我的布局变得流畅。基本上我所有的 div 和 imgs 都设置为 100% 宽度。您可以根据需要更改最大宽度，这实际上取决于您希望它的外观。