响应式图像在大多数浏览器上都有不希望的渲染答案

【问题标题】：Responsive images have undesired rendering on most browsers响应式图像在大多数浏览器上都有不希望的渲染
【发布时间】：2014-09-04 14:09:14
【问题描述】：

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

HTML sn-p:

<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 不会将粉色容器的宽度更改为高度会发生变化，但是，图像的高度会调整正确并保持纵横比。

如果您对如何解决此问题有任何想法或有任何建议，请访问我很想讨论一下。快把我逼疯了！

【问题讨论】：

首先，从 HTML/内联 CSS 中删除图像尺寸。
我在这里做了一个简化的例子来演示，但在工作版本中，我加载了很多缩略图，并且放入尺寸加速了页面的初始渲染。
是的，但响应式图像的基本要素是它们没有定义尺寸。
对不起@Paulie_D，我没有经历过。你有例子吗？

标签： css internet-explorer google-chrome firefox responsive-design

【解决方案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;
}

【讨论】：

感谢您的回复。对我来说仍然遇到与调整图像大小时相同的问题，包含元素不会缩小/扩展以包含图像。这有意义吗？
你喜欢使用列表吗？您所追求的似乎只是图像周围的边框/边距，以使它们能够正常流动。检查以下内容以了解我的意思：codepen.io/atcwells/pen/ovCpb
只是在它看起来更语义化的情况下，但我愿意承认。我将看看它与其他事物的契合程度，但该演示绝对是有希望的。感谢您的提示！
事实证明，列表本身并不是罪魁祸首——我也尝试使用<button>，但无济于事。就像您发现的那样，图像本身就可以让您大部分时间到达那里。不幸的是，据我所知，我有一个隐藏的要求需要覆盖（比如图像顶部的透明背景），这需要额外的元素。我最终选择了一种不流畅的基于媒体查询的方法。不完美，但...截止日期！无论如何感谢您的帮助。给了我一些很好的探索线索！

【解决方案2】：

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

如果您想玩，请查看笔或查看下面的代码。

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

HTML sn-p:

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

【讨论】：