Как адаптировать картинку под сайт?

Question

[WoodyAndBuzz]

Как адаптировать картинку чтобы она сжималась при уменьшении окна. Object-fit не помогает может я его неправильно применяю.
https://codepen.io/EdWrightwesr/pen/xxYRPPY

Comments

[Ankhena]

Вы же сами написали фикс размеры

.img__cream {
    width: 600px;
    height: 484px;
    object-fit: fill;
}

Да и не fill вам нужен, скорее всего. Вряд ли вы хотите, чтобы пропорции картинки изменялись и её растягивало черти как.

Суть object-fit в том, что у вас должен быть адаптивный блок, а в нем картинка, которая подстраивается под этот блок и тоже становится адаптивной.

width: 100%;
    height: 100%;
    object-fit: cover;  /*или contain*/

height: 812px;

В верстке очень редко задают фикс высоту. Только там, где это действительно необходимо. Потому что мы практически никогда не знаем, сколько будет контента.

[WoodyAndBuzz]

Ankhena, Но я написал фиксированные размеры для того чтобы они были нужного размера потому что картинка сама намного больше. Вы предлагаете использовать в процентах размеры?

[Ankhena]

WoodyAndBuzz,

Вы предлагаете использовать в процентах размеры?

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

потому что картинка сама намного больше.

Хорошо бы, чтобы картинка была подходящего размера, чтобы не грузить пользователям лишнего.
Для того, чтобы отдавать пользователям разные картинки для разных разрешений, используйте тег picture.

[WoodyAndBuzz]

Ankhena, Когда я задаю высоту картинке у меня текст при адаптировании выпадает за блок. Именно из-за того что я задал высоту. Если оставить ширину и применить object-fit:cover; ничего не происходит.

Хорошо бы, чтобы картинка была подходящего размера, чтобы не грузить пользователям лишнего.

А если не менять? Мне надо чтобы равномерно под разрешение сжималась картинка. А не исчезала её часть.

[Ankhena]

WoodyAndBuzz,

А если не менять?

если не менять, то, например, откроет посетитель сайтик с мобилки в роуминге, загрузится ему увесистая картиночка весом в мегабайтик вместо нескольких десятков килобайтов и на этом заработают мтс с мегафоном, а вовсе не вы.

Когда я задаю высоту картинке у меня текст при адаптировании выпадает за блок

Логично. Вы ведь задали фикс высоту блоку.

Сначала нужно определиться как должна вести себя картинка и весь блок целиком при изменении ширины окна.
Может ли картинка обрезаться или не может? Должны ли все картинки быть одинаковых размеров или нет?
Можно ведь только ширину задать по размеру блока, а высота пусть подстраивается в зависимости от самой картинки. Или можно для оберткам картинок сказать, чтобы сохраняли пропорции и вписывать в них картинки по методам cover или contain.

Если оставить ширину и применить object-fit:cover; ничего не происходит.

Ну тоже логично.

[Ankhena]

WoodyAndBuzz, вам вообще достаточно картинкам задать width 100%

Предварительно проверив свой код валидатором.

https://codepen.io/AnnaSummer/pen/PoQjrZp

[WoodyAndBuzz]

Но тогда возникает другая проблема. Эти два блока по задумке должны прижиматься к краям. А если убрать width: min-content. Тогда будет у правого края небольшой отступ, который не нужен. Почему-то justify-content: space-between в данном случае не помогает.

[Ankhena]

WoodyAndBuzz,

Эти два блока по задумке должны прижиматься к краям.

Я вам для наглядности рамочку нарисовала у aside, чтобы четко было видно, что оба дочерних прижаты каждый к своему краю блока.
https://codepen.io/AnnaSummer/pen/PoQjrZp

Тогда будет у правого края небольшой отступ, который не нужен

Но вы там сами придумали небольшой отступ margin-right: 7.2%;

[WoodyAndBuzz]

Ankhena, Марджин я использую как отступ (общий).
https://www.figma.com/file/H6PNGV5V8JRJ5wrs1vycEq/...

[Ankhena]

WoodyAndBuzz,

Марджин я использую как отступ (общий).

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

Более того, этот общий отступ у вас уже учтен в Products__wrapper. Вот же вы пишете:

.Products__wrapper {
  margin-left: 6.9%;
  margin-right: 7.2%;
}

Правда, почему-то разный справа и слева...

Но вопроса это уже вообще не касается.

Посмотрев макет, могу добавить то, что вы не могли сформулировать. Размер обеих картинок должен быть одинаковым.
Значит, картинку нужно обернуть в тег figure, задать ему пропорции с помощью aspect-ratio, если позволяет ТЗ или хака с паддингами (легко гуглится).
Картинке задать стили, которые я написала в первом комментарии.

Answer 1

[ThunderCat]

А где там Object-fit вообще??? У картинки из стилей тупо задана жесткая высота, больше ничего.

может я его неправильно

Да уж наверное, его бы хотя бы прописать надо...

Comments

[WoodyAndBuzz]

нет, я его прописывал и высоту задавал и ширину. Просто не записал, здесь.
https://codepen.io/EdWrightwesr/pen/xxYRPPY

[ThunderCat]

WoodyAndBuzz,

.img__cream {
  width: 100%;
  height: 100%;
  object-fit: contain;
}