Question

从这里的other questions开始，我已经到了可以保持图像宽高比的位置，将其在水平和垂直的容器中居中，并使其成为可能缩小以适应容器。几乎就在那里!!!

出了什么问题？我想扩展小图片，并可选择在<img>标记中添加一个类，即<img class="nogrow" ... />，以关闭展开小图片的功能。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 1

尝试object-fit: contain（none或scale-down代表.nogrow）。您根本不需要任何div，只需将图像的尺寸设置为100％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>

完美的图像容器：中心，宽高比，大杂烩和成长

1 个答案: