35

我正在阅读有关响应式设计的内容，我注意到以下问题：

关于“流体图像”的建议之一是使用 CSS 规则，例如：

img {
max-width: 100%;
height: auto; }

但为了让它产生正确的影响，我们需要去除 img 标签的内联图像宽度和高度属性。

如何解决在 HTML 中指定图像的宽度和高度很重要 ？

谢谢

4

3 回答 3

17

尽管（正如我在其他答案中所述）widthandheight属性不会干扰流体图像，但流体图像确实会干扰尚未加载的图像，它们会在 Chrome 以外的浏览器中占用适当的空间。有一个解决方法：将图像包装在具有内在比率的 div 中，如本文所述：http ://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

.img-wrapper {
    max-width: 200px; /* The actual width of the image */
}

.img-wrapper2 {
    height: 0;
    padding-bottom: 100%; /* The image's height divided by its width */
}

不幸的是，这需要两个包装器 div，才能获得正确的最大宽度效果。width但是，它确实提供了与和height属性提供的明显加载速度相同的优势。你可能想给.img-wrapper overflow: hidden隐藏一些旧IE的病态行为。

jsfiddle：http: //jsfiddle.net/7j3db/32/

于 2012-06-19T22:07:25.613 回答
11

您不需要剥离图像的宽度和高度属性。

jsFiddle：http: //jsfiddle.net/7j3db/

在 Chrome、Firefox、Opera、IE9 和 IE9 模拟 IE7 中测试。使用您提到的确切 CSS 规则，似乎在所有这些中都可以正常工作。

编辑：使用无法加载的图像进行测试：http: //jsfiddle.net/7j3db/1/

这在 Chrome 和 IE（甚至 IE7）中具有适当的效果，但在 Firefox 或 Opera 中却没有。然而，即使在 Firefox 和 Opera 中，效果也比不考虑 width 和 height 属性要好（因为 width 属性仍然有效，即使 height 属性没有效果）。

使用 alt 文本 ( http://jsfiddle.net/7j3db/2/ ) 进行进一步测试：IE7 完美处理，但 IE9 加入了 Opera，而 IE8 做了一些非常奇怪的事情（图像高度取决于 alt 文本的长度 -替代文本越多，空间越少）。Chrome 似乎完全忽略了替代文本。Opera 和 FF 显示 alt 文本，但在其他方面与之前的行为基本相同。然而，width 和 height 属性似乎与这些 alt 文本问题无关（在某种程度上，IE8 除外）。

于 2012-06-01T13:39:03.783 回答
3

您可以通过添加来实现这一点

html, body{
max-width:100%;
width:100%;
}

并将这些属性放在 img 标签的父 div 上。

于 2012-09-29T13:36:18.360 回答