html - 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

仅供引用，在较小的屏幕上(屏幕宽度 < 650 像素)，表格中的第一张图片也会损坏。

要修复它，请更改您的 img 以使用绝对定位 centering trick :

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

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