Div с изображениями внутри получают странный эффект

У меня есть несколько контейнеров бок о бок, которые могут быть пустыми или могут иметь изображение внутри.Div с изображениями внутри получают странный эффект

Проблема заключается в том, что вместо того, чтобы просто действовать как простое окно, изображение выходит за пределы div, а другие divs спускаются вниз. Как я могу исправить эту проблему? Мой код:

div { 
 
    background-color: lightGray; 
 
    display: inline-block; 
 
    height: 150px; 
 
    width: 100px 
 
} 
 

 
img { 
 
    height: 300px; 
 
    width: 80px 
 
}

<div> 
 
    <img src="girrafe.png"> 
 
</div> 
 
<div> 
 
</div> 
 
<div> 
 
</div> 
 
<div> 
 
</div>

источник

2017-02-20 Anonymous

Ваша фиксированная высота изображения больше фиксированной высоты для div? – Armin

Да, Армин. –

И что означает «простое окно»? Вам нужно отображать только часть изображения? Вы хотите уменьшить исходный размер, оставьте его одинаковым? Вы хотите, чтобы оно соответствовало более низкому значению до 100%? Есть много вариантов ... – Armin

Проблема фиксируется высота изображения превышает фиксированную высоту дел.

Также вы можете скрыть/прокрутить, используя свойство переполнения.

EDIT

Попробуйте это ...

Здесь я использовал object-fit:

Объект посадки CSS свойство определяет содержимое заменяемого элемента должен быть установлен на коробке, установленной по его используемой высоте и ширине.

<html> 
 

 
<head> 
 
    <style> 
 
    div { 
 
     background-color: lightGray; 
 
     display: inline-block; 
 
     height: 150px; 
 
     width: 100px 
 
    } 
 
    img { 
 
     height: 100%; 
 
     width: 100%; 
 
     object-fit: contain; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"> 
 
    </div> 
 
    <div> 
 
    </div> 
 
    <div> 
 
    </div> 
 
    <div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2017-02-20 12:20:51 Sankar

Изображение прочерчено, чего я не хочу. –

Как насчет прокрутки в контейнер? – Sankar

Да, я думаю, что ответ с переполнением-y выглядит богом, если нет чего-то лучшего, о котором я не знаю. –

Чтобы предотвратить изображение переполняя его родителя, если он больше, чем это, добавьте overflow:hidden правилам для div.

div{ 
 
    background-color:lightGray; 
 
    display:inline-block; 
 
    height:150px; 
 
    overflow:hidden; 
 
    width:100px 
 
} 
 
img{ 
 
    height:300px; 
 
    width:80px; 
 
}

<div><img src="https://unsplash.it/80/300/?random"></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

В качестве альтернативы, чтобы изображение переполнить его родителей, но держать верхние части всех дивы выровненные, добавить vertical-align:top к правилам вместо этого.

div{ 
 
    background-color:lightGray; 
 
    display:inline-block; 
 
    height:150px; 
 
    vertical-align:top; 
 
    width:100px 
 
} 
 
img{ 
 
    height:300px; 
 
    width:80px; 
 
}

<div><img src="https://unsplash.it/80/300/?random"></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

Или, наконец, если вы просто хотите, чтобы заставить изображение, которое будет содержаться в его родителя затем установите height, max-height, width & max-width свойства img правила, как так:

div{ 
 
    background-color:lightGray; 
 
    display:inline-block; 
 
    height:150px; 
 
    vertical-align:top; 
 
    width:100px 
 
} 
 
img{ 
 
    height:auto; 
 
    max-height:100%; 
 
    width:auto; 
 
    max-width:100%; 
 
}

<div><img heigt="80" src="https://unsplash.it/80/300/?random" width="300"></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

источник

2017-02-20 12:22:28 Shaggy

В отличие от других двух решений, это, по крайней мере, не будет искажать изображение. – Armin

Таким образом, я не вижу нижней части изображения. –

См. Альтернативное решение, которое я добавил. Если ни одно из решений не решит вашу проблему, отредактируйте свой вопрос, чтобы уточнить, что именно вы хотите достичь. – Shaggy

Div с изображениями внутри получают странный эффект

ответ

Смежные вопросы