Нужно вписать изображение в div фиксированного размера, но так, чтобы больший размер изображения занимал 100% div'а, а меньший - сколько получится. Если подгонять только один фиксированный размер, то это выглядит так
div {
width: 125px;
height: 70px;
}
div img {
width: 100%;
height: auto;
}
Но если у изображения высота больше, чем ширина, то получается швах. Решается ли проблема на CSS?
Ответ
Если я правильно понял вопрос, то вам нужно свойство background-size.
Например:
div {
background: url(/example/image/mybg.png) 100% 100% no-repeat;
background-size: contain;
}
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Источник: https://webref.ru/css/background-size
А если именно с тегом img нужно, то может такое решение устроит?
.ex1 {
width: 70px;
height: 125px;
}
.ex2 {
width: 125px;
height: 70px;
}
div {
border: 1px solid #ccc;
display: inline-block;
margin: 10px;
position: relative;
}
div img {
position: absolute;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
}
Комментариев нет:
Отправить комментарий