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中解决这个问题的简单或直接的方法是什么？或者它是一个bug，我应该寻找一个不太理想的工作--让它看起来不那么可怕吗？是什么引起了这个问题？

谢谢!

Answer 1

FYI，在较小的屏幕上(屏幕宽度<650 as )，表中的第一个图像也会中断。

要修复它，请将img更改为使用绝对定位定心技巧

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

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

Answer 2

为什么你需要.填充容器有绝对的定位？如果我从样式中删除下面的行，那么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%;" />