Как лучше сверстать картинку?

Question

[thechucky]

Есть стандартный блок с картинкой и заголовком ниже. Все картинки должны быть одного размера, с исходными пропорциями. Размер загружаемой картинки заранее неизвестен. Как лучше поступить в таком случае? Самый простой способ, который приходит в голову – сделать картинку фоном блока. Однако картинки – это информация и их лучше подключать через html. Кроме того, в этом случае образуется пустой html элемент, что тоже плохо.

Есть ли варианты такое сверстать, не прибегая к обрезанию картинки на сервере, не используя object-fit: cover и не используя js код? (Средствами html и css)

Answer 1

[Антон Спирин]

Самый простой способ, который приходит в голову – сделать картинку фоном блока.

Правильные мысли приходят в голову.

Однако картинки – это информация и их лучше подключать через html.

Есть такой атрибут style.

.card__img {
  height: $someHeight;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="card__img" style="background-image: url(path-to-image);"></div>

Comments

[hellcaster]

Только тогда добавить span. visually-hidden в этот div (для экраних читалок)

[devlocal]

Картинки через background-image - нормальный вариант что бы не парится, Но правильнее будет когда все картинки будут одного размера.

[thechucky]

Мне очень нравится object-fit, но он плохо поддерживается. Кажется есть способы заставить его нормлаьно работать в большинстве браузеров и это кажется решением проблемы. Таким образом мы не теряем семантику кода и получаем удобный способ заставить картинки вести себя правильно. Просто интересно было узнать есть ли способы сделать это при помощи стандартных средств как-то еще.

Answer 2

[Андрей Федосеев]

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