css - 响应式图像在大多数浏览器上都有不受欢迎的渲染

Question

我正在尝试生成一个网页布局，当您调整浏览器的高度，图像全部放大或缩小取决于高度。在下面的示例中，我的图像占 10%窗口的高度。

HTML 片段:

<ul class="image-list">
  <li class="image-list__item">
    <img class="image-list__image"
         height="200" width="300"
         src="http://lorempixel.com/300/200/sports/1/" />
  </li>
  <li class="image-list__item">
    <img class="image-list__image"
         height="200" width="300"
         src="http://lorempixel.com/300/200/sports/2/" />
  </li>
  <li class="image-list__item">
    <img class="image-list__image"
         height="200" width="300"
         src="http://lorempixel.com/300/200/sports/3/" />
  </li>
  <li class="image-list__item">
    <img class="image-list__image"
         height="200" width="300"
         src="http://lorempixel.com/300/200/sports/4/" />
  </li>
</ul>

CSS:

html,
body {
  height: 100%;
}

.image-list {
  display: block;
  height: 10%;
  list-style: none;
  margin-bottom: 0;
  margin-top: 0;
  padding-left: 0;
}

.image-list__item {
  box-sizing: border-box;
  border: 5px solid hotpink;
  display: inline-block;
  height: 100%;
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
}

.image-list__image {
  max-height: 100%;
  width: auto;
}

代码笔:http://codepen.io/casr/pen/ojyrn/

我在下面附上了网络浏览器的真实效果图，但是这是我测试过的 4 种浏览器的总结(Chrome，Firefox、IE 和 Safari:

• Chrome、IE 和 Safari 能够在页面加载/刷新。然而，Safari 是唯一能够在浏览器窗口打开时保持所需的渲染高度被调整。 Firefox 在容器内有一个填充加载页面时。
• Chrome 在缩小时打破了图像的纵横比。在膨胀，图像从粉色容器中溢出。缩小或扩展不会改变粉红色容器的宽度。
• Firefox 和 IE 不会更改粉红色容器的宽度，因为高度发生变化，但是图像的高度会调整正确并保持纵横比。

如果您对如何解决此问题有任何想法或有任何建议，请访问我很想讨论一下。这让我抓狂!

---

---

---

---

Answer 1

看看下面的笔:

http://codepen.io/atcwells/pen/ovCpb

你是这个意思吗？ Paulie_D 是正确的，如果您希望它具有响应性，则不能在图像上使用绝对高度/宽度。为简洁起见，仅在下面列出了 CSS(并且由于我可怜的老眼睛无法应付而调整了高度)。

html,
body {
  height: 100%;
}

.image-list {
  height: 50%;
  list-style: none;
}

.image-list__item {
  border: 5px solid hotpink;
  display: inline-block;
  height: 100%;
  list-style-image: none;
  list-style-type: none;
}

.image-list__image {
  display: block;
  max-height: 100%;
  width: auto;
}