强制图像获得最大宽度，使纵横比保持在最大高度

Question

如何在不侵入max-height参数并保持纵横比的情况下强制图像获得更高的宽度？

＆＃13;

＆＃13;

img {
      display:block;
      max-height: 100px;
      max-width: 100%;
      width: auto;
}

＆＃13;

<table border=1 style="table-layout: fixed; width: 500px;">
<thead>
  <th style="width: 100px;">
    100px
  </th>
  <th style="width: 400px;">
    400px
  </th>
</thead>
<tbody>
  <tr>
    <td>
      A image
    </td>
    <td>
      <img src="http://via.placeholder.com/400x100">
    </td>
  </tr>
  <tr>
    <td>
      This image could be larger
    </td>
    <td>
      <img src="http://via.placeholder.com/200x50">
    </td>
  </tr>
</tbody>
<table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将它包装在强制这些约束的容器中应该对你有用：

＆＃13;

＆＃13;

img {
      display:block;
      width: 100%;
}

.cell-wrapper {
      display:block;
      max-width: 100%;
      max-height: 100px;
      overflow-y: hidden;
      width: auto;
}

＆＃13;

<table border=1 style="table-layout: fixed; width: 1000px;">
<thead>
  <th style="width: 100px;">
    100px
  </th>
  <th style="width: 400px;">
    400px
  </th>
</thead>
<tbody>
  <tr>
    <td>
      A image
    </td>
    <td>
      <img src="http://via.placeholder.com/400x100">
    </td>
  </tr>
  <tr>
    <td>
      This image could be larger
    </td>
    <td>
      <div class="cell-wrapper">
        <img src="http://via.placeholder.com/200x50">
      </div>
    </td>
  </tr>
</tbody>
<table>

＆＃13;

＆＃13;

＆＃13;