Изменение размера изображения относительно блока, картинка может быть ЛЮБОЙ!!?

Question

[koshotayl]

Как сделать отзывчивую картинку чтобы при изменение РАЗМЕРОВ блока, картинка полностью в него вливалась ?

Answer 1

[Lord_Dantes]

Картинке

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

Comments

[koshotayl]

не поможет, уже побывал

[Lord_Dantes]

koshotayl, что значит не поможет. Как вы пробовали? Родителю этой картинки нужно задать ширину и высоту соответствующею. Все прекрасно работает.

[koshotayl]

Slava, Ну вот так, я родителю задал ширину и высоту и побывал cover и contain
Остается немного места, картинка не полностью вписывается в блок

[Lord_Dantes]

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

[koshotayl]

Slava, В этом и проблема, я хочу чтобы при изменение блока, картинка тоже изменяла свои размеры, потому что при уменьшение экрана блоки сжимаются в % и картинка тоже хочу чтобы сжималась в зависимости от начальных размеров блока, что только не побывал, не знаю в какой подход найти

[Lord_Dantes]

koshotayl, а вы же не для родителя пишете стили. Задайте родителю .img__block все что нужно.

[Lord_Dantes]

koshotayl,

.flex{
  display: flex;
}
.img__block{
  width: 280px;
  height: 250px;
}
.block img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[koshotayl]

Slava, Да, я тоже уже заметил,Спасибо) а теперь как сделать чтобы блок был адаптивным ?)

[Lord_Dantes]

koshotayl, max-width: и кол-во максимальной ширины. С высотой можно также.

[Тарас Шульга]

koshotayl, лучше картинке задайте не width:100, а max-width 100%
Тоже самое для блока замени фикс ширину, на Макс ширину.
И поставь flex-wrap: wrap