Как управлять соотношением сторон изображения на мобильных устройствах

У меня возникла проблема с соотношением сторон изображения. Это стало похоже на это изображение:

Но когда я настраиваю размер изображения, он становится таким:

Как с этим справиться?

.itemBox {
    height: 195px;
    margin: 15px;
    border-radius: 4px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
    background-color: #e4b972; 
}
.item_img {
    width: 120px;
    height: 195px;
}

<div class = "itemBox">
<div style = "float:left;">
 <img class = "item_img" src = "https://thumbs.dreamstime.com/z/no-image-available-icon-flat-vector-no-image-available-icon-flat-vector-illustration-132482953.jpg"  />
 </div>
</div>

Установить width: auto; height: 100%;?

— 22.12.2020 08:45

вы должны использовать width:100%;height:auto;

— 22.12.2020 08:45

это все еще то же самое, когда я использую width: auto; или width: 100%

— 22.12.2020 08:57

width: auto; и height: 195px; решает проблему.

— 22.12.2020 09:15

html css

22.12.2020 08:42

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

351

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

установите размер и ширину в div и поместите свое изображение в div

.itemBox {
    height: 195px;
    margin: 15px;
    border-radius: 4px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
    background-color: #e4b972; 
}

.div-for-img {
  width: 120px;
    height: 195px;
    float: left;
}

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

<div class = "itemBox">
    <div class = "div-for-img">
     <img class = "item_img" src = "https://thumbs.dreamstime.com/z/no-image-available-icon-flat-vector-no-image-available-icon-flat-vector-illustration-132482953.jpg"  />
    </div>
</div>

22.12.2020 09:54

Другие вопросы по теме

Создайте круг, который заполнит оставшееся пространство в ячейке flexbox

Скрытие панели навигации при прокрутке не фиксирует панель навигации на месте после прокрутки вверх

Переход работает только в одном направлении

Проблема с выбором кода страны в раскрывающемся списке стран с одинаковым кодом страны

CSS Border Transition добавляет нежелательные дополнительные пиксели

Javascript добавил несколько элементов Bootstrap Select, которые не работают

Изменить источник изображения, когда изображение достигает края экрана

Материал пользовательского интерфейса InputBase не может быть скрыт другими элементами

Изменение цвета при наведении на SVG

Элементы управления каруселью Bootstrap добавляют идентификатор карусели к адресу вместо перехода к следующему слайду

Как управлять соотношением сторон изображения на мобильных устройствах

Ответы 1

Другие вопросы по теме

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