响应式多图像尺寸布局？

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。要修复它，请添加width：auto。您可以专门为IE8应用条件CSS或使用下面的IE hack：

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