在媒体查询中具有100％宽度的图像

我在宽度为820px的div内有100％宽度的图像。当我将图像缩小到iPad和iPhone 5的屏幕尺寸时，图像会缩小为，但在这种尺寸下，我希望图像为屏幕尺寸宽度的100％。在媒体查询中具有100％宽度的图像

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

哪种方式最适合在平板电脑和智能手机中以全屏宽度响应图像？考虑到我使用的网格最大宽度为960px（骷髅网格：http://www.getskeleton.com/）

谢谢。

2013-04-07 swayziak

如果您正确使用媒体查询，image **将**缩放到100％，但相对于父元素。所以，小心使图像的父母在小分辨率上获得100％的回报。 – 2013-04-07 21:44:06

因此，如果父图像是宽度为820px的div，并且此div具有宽度为960px的父div，则我使用媒体查询以100％定义这3个元素的宽度？ – swayziak 2013-04-07 21:53:25

就是这样的。因为如果要将图像宽度设置为屏幕大小的100％，则每个父级必须具有100％的宽度。如果块元素的宽度未定义，则默认宽度为100％。 – 2013-04-07 22:06:21

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

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

2013-04-08 16:19:24 Fernker

所以考虑到我有这样的结构，HMTL：

，那只有

不具有宽度而定义的，我需要改变2米div的宽度以及媒体查询中的img？我也改变宽度或最大宽度？ – swayziak 2013-04-08 21:47:48

这是正确的。通常，当我选择手机尺寸时，我的布局变得流畅。基本上我所有的div和imgs都设置为100％宽度。如果你愿意，你可以改变最大宽度，这取决于你想要的样子。 – Fernker 2013-04-09 15:26:36

回答