jquery - 响应式多图像尺寸布局？

Question

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

图像也以来自 cms 的列表形式提供，例如……</p>

<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 */
  }
}