强制图像获得最大宽度，将纵横比保持在最大高度内答案

【问题标题】：Forcing image to get the max-width keeping the aspect ratio within a max-height强制图像获得最大宽度，将纵横比保持在最大高度内
【发布时间】：2018-09-28 22:31:40
【问题描述】：

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

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

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

【问题讨论】：

标签： html css image html-table

【解决方案1】：

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

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

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

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

【讨论】：