ReSQL.ru
     
powered by simpleCommunicator - 2.0.49     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Css height в проыентах от ширины?
9 сообщений из 9, страница 1 из 1
Css height в проыентах от ширины?
    #40048471
tors
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
tors
Участник
Ест тег <figure>. Он квадратный.
width: 30%;
При изменении ширины окна он должен оставаться квадратным.
Те height должен браться в процентах от ширины.

Можно запедалить такое?

C ув. Tors
...
Рейтинг: 0 / 0
24.02.2021, 16:51
| Ответить | Цитировать | Написать  
Css height в проыентах от ширины?
    #40048476
DHDD
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DHDD
Гость
tors,

aspect-ratio: 1/1;

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio
...
Рейтинг: 0 / 0
24.02.2021, 17:01
| Ответить | Цитировать | Написать  
Css height в проыентах от ширины?
    #40048487
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fkthat
Участник
DHDD,

Это вообще не то.

tors,

Код: css
1.
2.
3.
4.
.square {
    width: 30vw;
    height: 30vw;
}
...
Рейтинг: 0 / 0
24.02.2021, 17:18
| Ответить | Цитировать | Написать  
Css height в проыентах от ширины?
    #40048562
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
fkthat,
Это тоже не то.
vw и vh - это размеры в % от окна браузера, а 30% может быть надо от размеров родительского документа.

Есть просто свойство aspect-ratio
Но оно работает у Хрома и Едж только в самой последней версии (88), а у Файрфокса только для img.
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
...
Рейтинг: 0 / 0
24.02.2021, 21:28
| Ответить | Цитировать | Написать  
Css height в проыентах от ширины?
    #40048567
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fkthat
Участник
voraa
Это тоже не то.
vw и vh - это размеры в % от окна браузера, а 30% может быть надо от размеров родительского документа.


tors
При изменении ширины окна он должен оставаться квадратным.

Не факт, конечно, но из этого все-таки можно предположить, что речь идет все-таки про 30% окна браузера.
...
Рейтинг: 0 / 0
24.02.2021, 22:53
| Ответить | Цитировать | Написать  
Css height в проыентах от ширины?
    #40048773
tors
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
tors
Участник
Есть такой html:

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
<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:


Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
.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 сделать адаптивные квадраты?
...
Рейтинг: 0 / 0
25.02.2021, 20:40
| Ответить | Цитировать | Написать  
Css height в проыентах от ширины?
    #40048801
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fkthat
Участник
tors,

Тебе надо задавать width не для figure, а для img, тогда height у img выставится пропорционально а figure уже сам под img отразмерится. Как-то так. Кстати, в твоем коде - какой смысл "резинить" figure, если все равно у самой картинки размеры намертво фиксированы.
...
Рейтинг: 0 / 0
25.02.2021, 23:11
| Ответить | Цитировать | Написать  
Css height в проыентах от ширины?
    #40048856
DHDD
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DHDD
Гость
https://jsfiddle.net/Led023c9/

добавить:
Код: css
1.
2.
3.
4.
.images-set figure {
   aspect-ratio: 1/1;
   overflow: hidden;
}
...
Рейтинг: 0 / 0
26.02.2021, 11:01
| Ответить | Цитировать | Написать  
Css height в проыентах от ширины?
    #40048901
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fkthat
Участник
DHDD
https://jsfiddle.net/Led023c9/

добавить:
Код: css
1.
2.
3.
4.
.images-set figure {
   aspect-ratio: 1/1;
   overflow: hidden;
}


Уже выше писали - у него с поддержкой не очень .
...
Рейтинг: 0 / 0
26.02.2021, 12:29
| Ответить | Цитировать | Написать  
9 сообщений из 9, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Css height в проыентах от ширины?
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru       Новости, Чат       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=40048487&tid=1443296]:
 0ms
get settings:
 9ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 158ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 49ms
get tp. blocked users:
 1ms
others: 13ms
total:  260ms
созд. / загр.: 260ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]