CSS Размер объекта и соотношение сторон - PullRequest
Новая
       93

CSS Размер объекта и соотношение сторон

0 голосов
/ 05 августа 2020

У меня небольшая проблема с размером объекта css и / или соотношением сторон.

  1. Контекст: у меня есть блок (большая ссылка), содержащий изображение и некоторый текст. Изображение имеет неизвестные размеры и соотношение сторон.
  2. Я хочу, чтобы размеры изображения, не деформируя его, поместились в зону отображения с известным соотношением сторон. Пример: я хочу, чтобы мое изображение всегда отображалось в зоне 4/3, шириной 100%, максимальной шириной 400 пикселей. Моя проблема здесь в соотношении сторон, которое я не могу исправить. Я бы хотел, чтобы:
    • доступная ширина просмотра браузера и вычисление соответствующей ширины изображения (то есть без pb)
    • применить соотношение сторон 4/3 для определения высоты зоны отображения
    • отображать изображение в этой зоне, при необходимости увеличивая его, сохраняя при этом его изначальное c соотношение сторон (то есть, без pb) 
<a href="/foo" class="ctt">
    <picture>
        <img loading="lazy" src="foo" alt="whatever" class="ctt__img">
    </picture>
    <p class="ctt__img__titre">titre image</p>
    <p class="ctt__img__auteur">auteur image</p>
    <h3 class="ctt__titre">titre bloc</h3>
    <p class="ctt__desc">description bloc</p>
</a>

.ctt {
  display: block;
}
.ctt__img {
  width: 100%;
  max-width: 400px;
  object-fit : cover;
}

Любая помощь очень ценится

...