Задать вопрос
Outoverlay
@Outoverlay

Div, images, auto width, auto height?

<div class="pictures">
        <div class="icon"><img src="vv.png"></div>
</div>

.icon {
    max-width: 400px;
    max-height: 200px;
    display: inline-block;
}
.pictures img {
    width: 100%;
    height: 100%;
}


И все бы норм, но картинка расползается и изменяется, до не узнаваемости.
Можно заменить в img {
max-width: 100%;
max-height: 100%;
}
Но тогда картинка не заполнит весь блок.
Если не преобразовать, тогда картинка расползется за пределы div.
Можно как-то сделать так, чтобы картинка расползалась но за пределы блока не выходила?
  • Вопрос задан
  • 377 просмотров
Подписаться 1 Оценить Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Stepik
    Основы HTML и CSS
    2 недели
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Решения вопроса 1
Outoverlay
@Outoverlay Автор вопроса
Вот решение:

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
.pictures img {
max-width: 400px;
max-height: 200px;
}
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы