Сделайте изображение подходящим с помощью div без потери содержимого в CSS
У меня есть div, оборачивающий два изображения. Я хочу, чтобы второе изображение поместилось в div, потому что ширина и высота являются динамическими.
Мой код выглядит так:
.box {
width: 640px;
height: 540px;
float: left;
overflow: hidden;
}
.img-border {
width: 100%;
height: 100%;
display: block;
border-radius: 20px;
margin: 5px;
}<div class = "box" id = "target">
<div align = "center">
<img src = "http://cdn.tgdd.vn/Files/2014/06/24/551004/game-duoi-hinh-bat-chu4.jpg" width = "60%" height = "60%">
</div>
<img class = "img-border" id = "imgQues" src = "https://4.bp.blogspot.com/-K5SwATiq6cI/U84bk7MZPWI/AAAAAAAADkI/4lWV0ErVAFs/s1600/2014-07-22+14.11.00-1.png" />
<div class = "comment" id = "chatbox">
</div>
</div>Проблема, которую вы можете увидеть на .img-border, заключается в том, что не помещается (растягивается и изменяет размер) в div .box и сохраняется его соотношение сторон.
Есть ли способ уместить второй образ img-border в div и сохранить соотношение?
Используйте background-image вместо background-size: cover;
@KunalKhatri изображение должно быть источником, потому что оно переменное, значения меняются каждый раз.
Вы можете установить фоновое изображение динамически с помощью jquery в соответствии с требованиями.
Ответы 1
попробуйте следующее:
.box {
width: 640px;
height: 540px;
float: left;
overflow: hidden;
/**
Just for visualization
**/
background: gray;
}
/**
Just dummy names, rename as you like
*/
.box__first-child,
.box__second-child {
float: left;
width: 49.99999999%;
}
/**
Force images to always take remaining space
*/
.box img {
width: 100%;
}
.img-border {
width: 100%;
height: 100%;
display: block;
border-radius: 20px;
margin: 5px;
}<div class = "box" id = "target">
<div class = "box__first-child" align = "center">
<img src = "http://cdn.tgdd.vn/Files/2014/06/24/551004/game-duoi-hinh-bat-chu4.jpg" width = "60%" height = "60%">
</div>
<div class = "box__second-child">
<img class = "img-border" id = "imgQues" src = "https://4.bp.blogspot.com/-K5SwATiq6cI/U84bk7MZPWI/AAAAAAAADkI/4lWV0ErVAFs/s1600/2014-07-22+14.11.00-1.png" />
<div class = "comment" id = "chatbox">
</div>
</div>
</div>Изменения html не являются обязательными, вы можете сделать это и другим способом, но это кажется мне самым чистым. Хитрость в основном заключается в том, чтобы заставить изображения всегда занимать все пространство и выравнивать элементы друг за другом с помощью float.
Редактировать:
Должно получиться два разных ряда. Ваш пример, два изображения в одной строке. Я хочу, чтобы первое изображение было 1/3 вверху div, второе изображение должно быть 2/3 внизу.
@vanloc Я добавил оба варианта, я думаю, вы могли иметь в виду ... простите, я не очень хорош в этом: D
Взгляните на CSS принудительно изменяет размер изображения и сохраняет соотношение сторон и посмотрите, поможет ли это.