Question

我很努力在谷歌和其他地方找到答案，但似乎相当模糊。我必须做一些花哨的CSS才能创建一个具有特定宽高比的盒子，其中缩略图将垂直和水平居中。这些都是直截了当的想法，实际上在CSS中实现起来有些复杂。我的解决方案在任何地方都很有效，除了在Chrome中的表格内部，其图像的尺寸大于容器。

以下是演示此问题的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

希望你可以看到，在Chrome（我使用43.0.2357.132 64位）和Safari（8.0.7）中，高/大图像超出了其父级的边界，其高度正在被设置达到图像的自然高度。宽图像都按预期工作，所以这似乎只是一个高度问题。

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

谢谢！

Answer 1

为什么你需要.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%;">

而不是（注意/＆gt;在行尾）

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

Answer 2

仅供参考，在较小的屏幕上（屏幕宽度<650px），桌面内的第一张图片也会断开。

要解决此问题，请将img更改为使用绝对定位centering trick：

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

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

Chrome和Safari中的图片内部图片100％高度错误

2 个答案: