Как обернуть div и img в контейнер display:flex
EDIT: вам нужно запустить фрагмент в полноэкранном режиме.
У меня есть дисплей: гибкий контейнер с элементом div и другой с img внутри него, оба с шириной 50%. Я хочу, чтобы они при изменении размера ширины ниже 800 пикселей были со 100% шириной экрана и переносились одна за другой на новые строки (flex-wrap), но при этом оставались отзывчивыми, как и до переноса.
Я пробовал, но что-то делаю не так - когда ширина экрана меньше 800px, img набирает 100% ширины как надо, но первый элемент скрыт и flex-wrap вообще отсутствует.
#elegantImg{
max-width: 100%;
height: auto;
}
.elegant-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col {
position: relative;
width: 50%;
height: auto;
overflow: hidden;
}
.background {
background-color: #F6F4F1;
height: 100%;
}
.col img {
width: 100%;
height: auto;
object-fit: cover;
}
@media screen and (max-width: 800px) {
.col {
width: 100%;
}
} <section>
<div class = "elegant-container">
<div class = "col">
<div class = "background"></div>
</div>
<div class = "col">
<img id = "elegantImg" src = "https://i.imgur.com/TVL0phR.png" alt = "">
</div>
</div>
</section>Пожалуйста помоги :)
Ответы 4
#elegantImg{
max-width: 100%;
height: auto;
}
.elegant-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col {
position: relative;
width: 50%;
height: auto;
min-height: 500px;
overflow: hidden;
}
.background {
background-color: #F6F4F1;
height: 100%;
}
.col img {
width: 100%;
height: auto;
object-fit: cover;
}
@media screen and (max-width: 800px) {
.col {
width: 100%;
}
} <section>
<div class = "elegant-container">
<div class = "col">
<div class = "background"></div>
</div>
<div class = "col">
<img id = "elegantImg" src = "https://i.imgur.com/TVL0phR.png" alt = "">
</div>
</div>
</section>#elegantImg{
max-width: 100%;
height: auto;
}
.elegant-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col {
position: relative;
width: 50%;
height: auto;
overflow: hidden;
}
.background {
background-color: #F6F4F1;
height: 100%;
}
.col img {
width: 100%;
height: auto;
object-fit: cover;
}
@media screen and (max-width: 800px) {
.col {
width: 100%;
}
.background{
min-height: 300px;
}
} <section>
<div class = "elegant-container">
<div class = "col">
<div class = "background"></div>
</div>
<div class = "col">
<img id = "elegantImg" src = "https://i.imgur.com/TVL0phR.png" alt = "">
</div>
</div>
</section>Почти то, что я хочу, но div с цветом фона не такого размера, как div с img, когда они сворачиваются на новую строку
Измените свой медиа-запрос на это:
@media screen and (max-width: 800px) {
.col {
width: 100%;
height: 50%;
}
.elegant-container {
height:170vw;
}
}
Эта высота является моей приблизительной оценкой двойной высоты вашего изображения по отношению к ширине области просмотра. Проблема в том, что когда элементы div расположены рядом, собственная ширина окна дает значение width: 50%. Но когда они установлены как вертикальные, у элемента .elegant-container нет собственной высоты, и единственным элементом с определенным размером является изображение. Элементы Flex растягиваются до размера своих дочерних элементов, если размер не указан, поэтому для расчета этого размера необходимо получить высоту своих дочерних элементов. 50% от 0 равно 0, поэтому столбец .background не имеет высоты. Только после этого высота .elegant-container рассчитывается на основе высоты изображения, после чего столбец .background уже имеет высоту 0.
Просто представьте, что вам нужно растянуть контейнер до размера, при котором поместится полное изображение, а столбец .background будет такого же размера.
Эй, тай. А как вы рассчитали, что высота должна быть 170vw?
Вы можете указать соотношение сторон элемента столбца для применения высоты в зависимости от ширины. Так же уберите стилизацию по id - она не нужна. Измените свой код на это:
.elegant-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.col {
position: relative;
width: 50%;
aspect-ratio: 1/1;
overflow: hidden;
}
.background {
background-color: #F6F4F1;
height: 100%;
}
.col img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 800px) {
.col {
width: 100%;
}
} <section>
<div class = "elegant-container">
<div class = "col">
<div class = "background"></div>
</div>
<div class = "col">
<img src = "https://i.imgur.com/TVL0phR.png" alt = "">
</div>
</div>
</section>ибаси манка лек
Они не сохраняют тот же размер при изменении размера