响应式多图像尺寸布局？

Question

我不确定这是不是问这个问题的正确地方，但我正在尝试弄清楚如何建立一个具有多种图像尺寸但又保持响应的布局。

图像也来自 cms 的列表，例如…

<ul>
                        <li> <img src="" alt="" /></li>
                        <li> <img src="" alt="" /></li>
                        <li> <img src="" alt="" /></li>
                        <li> <img src="" alt="" /></li>
                        <li> <img src="" alt="" /></li>
                    </ul>

我玩过 css 但限制太多，我假设 JS 途径是要走的路，但什么都没看到..

谢谢你，如果这是错误的部分，请道歉

Answer 1

您可以使用 max-width:100% 和 height:auto 使图像自动调整到边界的最大宽度。

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

上面的响应式图片 CSS 适用于 IE7 和 IE9，但不适用于 IE8。要修复它，请添加宽度：自动。您可以应用专门针对 IE8 的条件 CSS 或使用以下 IE hack：

@media \0screen {
  img { 
    width: auto; /* for ie 8 */
  }
}