Растягивание изображения, чтобы заполнить высоту ячейки таблицы

#html #css #html-table #html-email

#HTML #css #html-таблица #html-электронная почта

Вопрос:

У меня есть ячейка таблицы неизвестной высоты, которая содержит img . Это img имеет фиксированную ширину в пикселях, но мне нужно, чтобы оно растягивалось, чтобы заполнить (но не превышать) всю высоту ячейки таблицы. Ширина должна оставаться неизменной независимо от высоты.

Обычно я бы делал это с помощью height: 100% , но, похоже, в этом сценарии это не работает:

 img {
  display: block;
  width: 25px;
  height: 100%;
}

 <table>
  <tr>
    <td>
      Here is some content.<br/>
      I would like the adjacent image to stretch to be<br/>
      the same height as it, but not have the image get<br/>
      any wider.
    </td>
    <td>
      <img src="https://placehold.it/20x20" />
    </td>
  </tr>
</table>

Как я могу заставить изображение заполнить высоту своей ячейки?

1. Если бы вы добавили высоту в качестве атрибута к изображению (не CSS), это, вероятно, сделало бы то, что вы хотите. <img src="https://placehold.it/20x20" height="100%" width="25" /> Но приведенный ниже ответ на CSS background является более гибким решением.

Ответ №1:

Рассматривайте изображение как фон, и вы можете легко добиться этого. Вы также можете сохранить стиль background-image как встроенный, чтобы иметь возможность устанавливать его как img элемент

 .img {
  width: 25px;
  background-size:100% 100%;
}

 <table>
  <tr>
    <td>
      Here is some content.<br/>
      I would like the adjacent image to stretch to be<br/>
      the same height as it, but not have the image get<br/>
      any wider.
    </td>
    <td class="img" style="background-image:url(https://placehold.it/20x20)">
    </td>
  </tr>
</table>

Если вы хотите сохранить использование img , вы можете использовать position:absolute

 .img {
  width: 25px;
  position:relative;
}
.img img {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

 <table>
  <tr>
    <td>
      Here is some content.<br/>
      I would like the adjacent image to stretch to be<br/>
      the same height as it, but not have the image get<br/>
      any wider.
    </td>
    <td class="img">
      <img src="https://placehold.it/20x20)"/>
    </td>
  </tr>
</table>

1. Это действительно чистый способ сделать это! Спасибо.

2. @AaronChristiansen добавил другой метод

3. @TemaniAfif Почтовые клиенты, такие как Outlook, не будут отображать его правильно. Это для электронной почты в формате HTML, а не для Интернета.

Ответ №2:

В почтовых клиентах, таких как Outlook Desktop 2007-2019, вам необходимо указать ширину изображения, особенно если вы отображаете его в размере, который не соответствует его физическому размеру. В противном случае Outlook проигнорирует вашу таблицу стилей и вернется к фактическому размеру.

Что касается высоты, вы обычно можете оставить ее пустой и добавить в таблицу стилей height: auto;

 <img src="https://placehold.it/20x20)" width="20" height="" alt="" border="0" style="height: auto;">

Удачи.