Блог

Главная - Вопросы по программированию - высота изображения 100% от строки таблицы

высота изображения 100% от строки таблицы

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

Если у меня есть такой HTML:

 <table>
   <tr>
      <td>
         <img src="a.png">
      </td>
      <td>
         <p>Sunday</p>
         <p>Sunday</p>
         <p>Sunday</p>
         <p>Sunday</p>
         <p>Sunday</p>
      </td>
   </tr>
</table>

Во втором столбце может быть переменное количество абзацев, поэтому высота будет другой. Какой бы высоты ни была строка, я хочу, чтобы изображение было такой высоты. Я пробовал это:

 img {
   height: 100%;
}

но, похоже, это ничего не дало. Я хотел бы избежать изменения HTML, если это возможно, могу ли я сделать это только с помощью CSS?

Комментарии:

1. Я знаю, что вы не хотите изменять HTML, но IMO, поскольку это не похоже на табличные данные, я бы рекомендовал не использовать <table> , это может упростить стилизацию

2. Почему бы не сделать a.png background-image из <td> ?

3. @StevenPenny Существуют ли какие-либо классы или идентификаторы, на которые вы могли бы настроить таргетинг с помощью вашего CSS?

4. @StevenPenny изображение всегда будет одинаковым? Это альбомная или портретная форма?

5. Я чувствую, что вы могли бы использовать object-fit: cover; затем установите ширину на 100% вместо высоты, и это приблизит вас. Но может быть полезно, если ваша таблица всегда имеет одинаковую ширину. Возможно, сработает одно из свойств, подходящих для объекта. Вот пример, который я сделал на W3: w3schools.com/code/tryit.asp?filename=GI8K9OUM4FX7

Ответ №1:

Итак, причина, по которой я хотел увеличить высоту изображения, заключалась в том, что второй столбец может быть намного больше, что приводит к уменьшению изображения при вертикальном центрировании таблицы по умолчанию. Вместо того, чтобы сосредоточиться на размере изображения, я просто переместил изображение наверх:

 td {
   vertical-align: top;
}

Если у кого-то есть решение исходного вопроса, мне все еще интересно, но
это должно быть сделано в качестве обходного пути.