Задать вопрос
@thechucky
верстка

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

5b79c9893e1bc418385061.png

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

Есть ли варианты такое сверстать, не прибегая к обрезанию картинки на сервере, не используя object-fit: cover и не используя js код? (Средствами html и css)
  • Вопрос задан
  • 351 просмотр
Комментировать
Подписаться 5 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 2
rockon404
@rockon404
Frontend Developer
Самый простой способ, который приходит в голову – сделать картинку фоном блока.

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

Однако картинки – это информация и их лучше подключать через 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>
Ответ написан
3 комментария
3 комментария
@itlen
Как сверстать — и | не обрезая и не искажая растягиванием? Возьмите крайний случай: вертикальный портрет и горизонтальная панорама и поймете что никак.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend-стажер React
Студия Oxem • Москва
от 20 000 до 80 000 ₽
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Помочь с запуском бота
20 апр. 2024, в 13:23
1000 руб./за проект
Младший системный аналитик
20 апр. 2024, в 12:50
30000 руб./за проект
Скопировать верстку, посадить на функционал
20 апр. 2024, в 12:01
20000 руб./за проект
Ещё заказы