完美的图像容器：居中、纵横比、收缩和增长以适合

Question

从 other questions 开始，我已经到了这样的地步，我可以保持图像的纵横比，将其水平和垂直居中放置在容器中，并使其缩小以适合容器.快到了！！！

怎么了？我想展开小图，并且可以选择在 <img> 标签中添加 class 即 <img class="nogrow" ... /> 以关闭展开小图的功能。

.parent {
  width: 240px;
  height: 160px;
  border: 1px solid black;
  position: relative;
}

.img-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  text-align:center;
  font: 0/0 a;
}

.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
  max-height: 100%;
  max-width: 100%;
}

<table>
<thead>
  <th>Actual</th>
  <th>Expected</th>
</thead>
<tbody>
  <tr>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img src="http://placehold.it/1000x500" alt="" />
        </div>
      </div>
    </td>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img src="http://placehold.it/1000x500" alt="" />
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img src="http://placehold.it/500x600" alt="" />
        </div>
      </div>
    </td>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img src="http://placehold.it/500x600" alt="" />
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img src="http://placehold.it/50x60" alt="" />
        </div>
      </div>
    </td>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img src="http://placehold.it/50x60" alt="" height="100%" />
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img src="http://placehold.it/100x50" alt="" />
        </div>
      </div>
    </td>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img src="http://placehold.it/100x50" alt="" width="100%" />
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <th colspan="2">With ".nogrow"</th>
  </tr>
  <tr>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img class="nogrow" src="http://placehold.it/1000x500" alt="" />
        </div>
      </div>
    </td>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img class="nogrow" src="http://placehold.it/1000x500" alt="" />
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img class="nogrow" src="http://placehold.it/500x600" alt="" />
        </div>
      </div>
    </td>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img class="nogrow" src="http://placehold.it/500x600" alt="" />
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img class="nogrow" src="http://placehold.it/50x60" alt="" />
        </div>
      </div>
    </td>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img class="nogrow" src="http://placehold.it/50x60" alt="" />
        </div>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img class="nogrow" src="http://placehold.it/100x50" alt="" />
        </div>
      </div>
    </td>
    <td>
      <div class="parent">
        <div class="img-container">
          <div class="centerer"></div>
          <img class="nogrow" src="http://placehold.it/100x50" alt="" />
        </div>
      </div>
    </td>
  </tr>
</tbody>
</table>

Answer 1

尝试 object-fit: contain（none 或 scale-down .nogrow）。您根本不需要任何 div，只需将图像的尺寸设置为 100% x 100%。

<!DOCTYPE html>
<style>
 td { width:240px; height:160px; border:1px solid }
 img { width:100%; height:100%; object-fit:contain; display:block }
 .nogrow { object-fit:scale-down }
</style>
<table>
 <tr><td><img src="http://placehold.it/1000x500" alt="">
 <tr><td><img src="http://placehold.it/500x600" alt="">
 <tr><td><img src="http://placehold.it/50x60" alt="">
 <tr><td><img src="http://placehold.it/100x50" alt="">
 <tr><th>With ".nogrow"
 <tr><td><img class="nogrow" src="http://placehold.it/50x60" alt="">
 <tr><td><img class="nogrow" src="http://placehold.it/100x50" alt="">
</table>

完美的图像容器：居中、纵横比、收缩和增长以适合

Perfect Image Container: Centered, Aspect Ratio, Shunk and Grown to Fit

html

css

image

responsive-images