响应式图像在大多数浏览器上都有不良渲染

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;
}

Codepen：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;
}

Answer 2

我无法让流畅的图像以我的方式工作 需要我的要求（虽然检查welale的答案 替代）。相反，我选择@media查询来捕捉 不同点的高度。

如果你想要一个游戏，请查看笔，或者参见下面的代码。

笔：http://codepen.io/casr/pen/FGsvK

HTML片段：

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

CSS：

.image-list {
  background-color: lightgreen;
  display: block;
  height: 20%;
  list-style: none;
  margin-bottom: 0;
  margin-top: 0;
  overflow: auto;
  padding-left: 0;
  white-space: nowrap;
}

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

.image-list__image {
  display: block;
  height: 20px;
  width: auto;
}

@media only screen and (min-height: 320px) {
  .image-list__image {
    height: 35px;
  }
}

@media only screen and (min-height: 480px) {
  .image-list__image {
    height: 70px;
  }
}

@media only screen and (min-height: 800px) {
  .image-list__image {
    height: 130px;
  }
}

html,
body {
  height: 100%;
}