Блог

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

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

#html #css

#HTML #css

Вопрос:

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

изображение 1

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

image2

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

 .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>

Комментарии:

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

2. вы должны использовать ширину: 100%; высота: авто;

3. это все равно, когда я использую width: auto; или width: 100%

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

Ответ №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>

введите описание изображения здесь