Как сделать высоту картинки равной его ширине?

Question

[Александр]

Как сделать высоту картинки равной его ширине? Ширина картинки меняется динамически. Картинка находится в div размеры которого тоже динамические? хотелось бы добиться такого эффекта что бы при загрузки картинки любых размеров(вытянутые по горизонтали или вертикали) на сайт они принимали все одинаковый размер.

Comments

[Danny Arty]

вы хоть покажите ваш текущий вариант

[Александр Семёнов]

object-fit: cover;

Для элемента img. Если я правильно понял суть вопроса, конечно)

[Ankhena]

1. Используете aspect-ratio если позволяет ТЗ. Если нет, гуглите "css пропорции хак с паддингом".
В итоге делаете ваш блок квадратным.
2. Чтобы вписать картинку, используете object-fit.
Тут есть два пути: абсолютом или гридами.

[Александр]

Danny Arty, Александр Семёнов, Ankhena,
В правом верхнем углу есть две кнопки(по расположению элементов) когда они расположены горизонтально все ок. (1 скрин) Но когда я выбираю расположение элементов "сеткой" картинка растягивается на весь див, из за за того что она сама по себе вытянута. Хочу сделать так что бы высота всех картинок при втором расположении равнялась их ширине.

<div class="katalog__nomber">
    			
    			<img class="katalog__img" src="img/avatar__course.png">
    			

    			<div class="katalog__main">
                             hsdjhfshd
                        </div>
</div>

Эти стили применяться если расположение идет списком

.katalog__nomber{
  display: flex;
  height: 266px;
  border-radius: 15px;
  box-shadow: 0 0 18px #e1e1e1;
  overflow: hidden;
}
.katalog__img{
  min-width: 270px;
}

А если grid то добавляется класс эктив

.katalog__nomber.active{
  display: flex;
  flex-direction: column;
  width: calc(33.33% - 13.33px);
  height: 796px;
}

Хочется добиться что бы пользователь когда заливал картинку она принимала размеры страницы а не такие какие у нее первоначально

[Ankhena]

poshuriku, изучите свойство object-fit, пожалуйста.
Как задать пропорции блоку я уже тоже написала.

У вас вообще нет обертки вокруг картинки (figure, div)

Answer 1

[Danny Arty]

Верхняя - горизонтальная, нижняя - вертикальная.

Answer 2

[Antony Bark]

UPD к ответу Danny Arty
Не всегда можно опереться на абсолютные\фиксированные размеры.
Данная задача решается стандартно через background обёртки, в которую вставлена заглушка из IMG (размера квадрата).
https://codepen.io/tolfy/pen/XWVaGae
Заглушкой в примере использована одна из иллюстраций.
Способ дёшев и кроссбраузен.