25.02.2021, 20:34
|
Профессор
|
|
Регистрация: 06.01.2012
Сообщений: 409
|
|
Адаптивные квадраты (Flex)
Есть такой html:
<div class="images-set">
<figure>
...
</figure>
<figure>
....
</figure>
<figure>
<p>
<img src="images/desktop/Ic_3.png" alt="">
</p>
<figcaption>
Your money will always be safe
</figcaption>
</figure>
</div>
и css:
Код:
|
.images-set {
display: flex;
flex-direction: row;
justify-content:space-between;
margin-left: 2%;
margin-right: 2%;
}
.images-set figure {
/*width: 30%;*/
flex-basis: 30%;
/*height: 30%;*/
background: #FFFFFF;
border-radius: 28px;
box-shadow: 0 5px 10px 0 rgba(7,8,63,0.50);
text-align: center;
}
.images-set img {
width: 330px;
height: 250px;
}
.images-set figcaption {
display: block;
margin: auto;
width: 80%;
height: 90px;
text-align: center;
padding: 5px 5px 5px 5px;
} |
Квадратные <figure>.
Когда уменьшаю по горизонтали размер браузера,
они превращаются в прямоугольник.
Можно ли средствам flex сделать адаптивные квадраты?
|
|
25.02.2021, 21:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
torsar,
как вариант ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.images-set {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-left: 2%;
margin-right: 2%;
}
.images-set figure {
margin: 0;
flex-basis: 29vmax;
height: 29vmax;
background: #fff;
border-radius: 4vmax;
box-shadow: 0 5px 10px 0 rgba(7,8,63,.50);
text-align: center;
}
@media (max-width: 480px) and (orientation: landscape){
.images-set figure {
flex-basis: 29vmin;
height: 29vmin;
}}
@media (orientation: portrait){
.images-set figure {
flex-basis: 29vmin;
height: 29vmin;
}}
.images-set img {
margin-top: 3px;
width: 70%;
height: auto;
}
.images-set figcaption {
display: block;
text-align: center;
padding: 5px 5px 5px 5px;
font-size: 1.8vmax;
}
.images-set p {
margin: 2px;
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="images-set">
<figure>
...
</figure>
<figure>
....
</figure>
<figure>
<p>
<img src="https://www.groziodovanos.lt/uploads/images/small/6822.jpg" alt="">
</p>
<figcaption>
Your money will always be safe
</figcaption>
</figure>
</div>
</body>
</html>
Последний раз редактировалось рони, 25.02.2021 в 23:35.
|
|
25.02.2021, 22:13
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,704
|
|
Нет, рони
Спрашивают не про это
С изменением размера браузера должен меняться и размер
<div class="images-set">
Ширина <figure> должна оставаться 30% от родительского div.images-set, но при этом должна меняться и их высота, что бы они оставались квадратными.
Сейчас появилось css свойство aspect-ratio, но оно есть только в последнем Хром и Едж (88), а у Файрфокс только для <img>
Как без него, только с CSS, непонятно.
Последний раз редактировалось voraa, 25.02.2021 в 22:21.
|
|
25.02.2021, 22:29
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
voraa,
сделал квадрат )))
|
|
25.02.2021, 22:48
|
|
Профессор
|
|
Регистрация: 03.02.2020
Сообщений: 2,704
|
|
Нет. Попробуй сожми окно до размеров, что бы исчезло пустое пространство между <figure> и еще больше. Эти <figure> превратятся в вытянутые вертикально прямоугольники.
(Тут через HTML run это не получается, т.к. не сжимается, а появляется полоса прокрутки, но если вынести в файл и попробовать отдельно...)
К тому же задание в 29vw совсем не универсально. Где гарантия, что родительский div будет 100vw, а не станет по какой то причине уже?
Интересно принципиально решить задачу, как оставлять квадрат квадратом при изменении ширины.
Последний раз редактировалось voraa, 25.02.2021 в 22:54.
|
|
25.02.2021, 23:17
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
torsar,
Может не в тему, но чувак, возьми грид-систему готовую, не мучайся, в любом css-фреймворке она есть. Если пока не разбираешься в сборке, просто смотри конечный исходник. Допустим, берешь этот, строки 237-639 это грид, сss-переменную (начинается с --) меняешь на константу, всё, там же читаешь как пользоваться. Это освоишь, потом можешь какой-нибудь Bootstrap разобрать также.
|
|
25.02.2021, 23:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
voraa,
очередной вариант ))) там же # 2
|
|
|
|