Chrome 和 Safari 中表格内的图像 100% 高度错误

Question

我非常努力地在这里、谷歌和其他地方找到了这个问题的答案，但它似乎很模糊。我必须做一些花哨的 CSS 来创建一个具有特定纵横比的框，其中缩略图将垂直和水平居中。这些是直截了当的想法，实际上在 CSS 中实现起来有些复杂。我的解决方案在任何地方都很好用，除了在 Chrome 中的表格中，其图像的尺寸大于容器。

这是演示该问题的代码：

/*
sets aspect ratio of container by adding padding that is calculated
according to width of its parent element
*/
.aspect-ratio {
  width: 100%;
  display: inline-block;
  position: relative;
}

.aspect-ratio:after {
  padding-top: 76.19%;
  display: block;
  content: '';
}

/*
parent has no height, this fills the container's space
*/
.fill-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 0;
}

/*
centers image horizontally and vertically
background color
*/
.image-background {
  text-align: center;
  background-color: #444;
  height: 100%;
  width: 100%;
}

.image-background::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

img {
  display: inline-block;
  padding: 5px;
  box-sizing: border-box;
  vertical-align: middle;
}

/*
Firefox: image height fills the parent element
Chrome:
inside table - image is rendered at its natural height
outside table - image height fills the parent element as expected
*/
.fill-height {
  height: 100%;
}

.fill-width {
  width: 100%;
}

/* other styles */
h1, h2, h3 {
  text-align: center;
}

table {
  width: 100%;
}

.thumbnail-viewer {
  width: 40%;
  margin: 10px auto;
}

<h1>tall image</h1>
<h2>small</h2>
<h3>table</h3>
<table>
  <tbody>
    <tr>
      <td>
        <div class="thumbnail-viewer">
          <div class="aspect-ratio">
            <div class="fill-container">
              <div class="image-background">
                <img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
  <div class="aspect-ratio">
    <div class="fill-container">
      <div class="image-background">
        <img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">
      </div>
    </div>
  </div>
</div>

<h2>large</h2>
<h3>table (works in firefox and IE, breaks in chrome and safari)</h3>
<table>
  <tbody>
    <tr>
      <td>
        <div class="thumbnail-viewer">
          <div class="aspect-ratio">
            <div class="fill-container">
              <div class="image-background">
                <img class="fill-height" src="http://www.landscapeontario.com/thumbnailer.php?image=/assets/1320240573.Twine_wrap_2.JPG&imgWH=500" style="height: 100%;">
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
  <div class="aspect-ratio">
    <div class="fill-container">
      <div class="image-background">
        <img class="fill-height" src="http://www.landscapeontario.com/thumbnailer.php?image=/assets/1320240573.Twine_wrap_2.JPG&imgWH=500" style="height: 100%;">
      </div>
    </div>
  </div>
</div>

<h1>wide image</h1>
<h2>small</h2>
<h3>table</h3>
<table>
  <tbody>
    <tr>
      <td>
        <div class="thumbnail-viewer">
          <div class="aspect-ratio">
            <div class="fill-container">
              <div class="image-background">
                <img class="fill-width" src="http://www.beach.com/images/activity-photo-county-londonderry-ireland-3-day-lake-district-and-hadrian-s-wall-small-group-tour-from-edinburgh-1.jpg">
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
  <div class="aspect-ratio">
    <div class="fill-container">
      <div class="image-background">
        <img class="fill-width" src="http://www.beach.com/images/activity-photo-county-londonderry-ireland-3-day-lake-district-and-hadrian-s-wall-small-group-tour-from-edinburgh-1.jpg">
      </div>
    </div>
  </div>
</div>

<h2>large</h2>
<h3>table</h3>
<table>
  <tbody>
    <tr>
      <td>
        <div class="thumbnail-viewer">
          <div class="aspect-ratio">
            <div class="fill-container">
              <div class="image-background">
                <img class="fill-width" src="http://www.craterlaketrust.org/pub/photo/thumb/Crater-Summer_cropto_500x200.JPG">
              </div>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h3>no table</h3>
<div class="thumbnail-viewer">
  <div class="aspect-ratio">
    <div class="fill-container">
      <div class="image-background">
        <img class="fill-width" src="http://www.craterlaketrust.org/pub/photo/thumb/Crater-Summer_cropto_500x200.JPG">
      </div>
    </div>
  </div>
</div>

希望如您所见，在 Chrome（我使用的是 43.0.2357.132 64 位）和 Safari（8.0.7）中，高/大图像超出了其父级的边界，并且其高度被设置为图像的自然高度。宽幅图像都按预期工作，所以这似乎只是高度问题。

我的问题：在 Chrome 和 Safari 中解决此问题的简单或直接方法是什么？或者它是一个错误，我应该寻找一个不太理想的解决方法，让它看起来不那么可怕吗？是什么导致了这个问题？

谢谢！

Answer 1

仅供参考，在较小的屏幕上（屏幕宽度

要修复它，请将您的img 更改为使用绝对定位centering trick：

img {
  padding: 5px;
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

这也意味着您不需要image-background::before 声明。

Answer 2

为什么需要 .fill-container 进行绝对定位？如果我从样式中删除下面的行，那么 Chrome 中的一切看起来都很好（我无法在 Safari 中测试）：

.fill-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    font-size: 0;
}

你还没有关闭 img 标签，你有

<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;">

而不是（注意 /> 在行尾）

<img class="fill-height" src="http://www.irmaagro.com/images/d.jpg" style="height: 100%;" />