Гость
Войти | Профиль | Очистить
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Css height в проыентах от ширины? / 9 сообщений из 9, страница 1 из 1
24.02.2021, 16:51
    #40048471
tors
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Css height в проыентах от ширины?
Ест тег <figure>. Он квадратный.
width: 30%;
При изменении ширины окна он должен оставаться квадратным.
Те height должен браться в процентах от ширины.

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

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

aspect-ratio: 1/1;

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

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

tors,

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

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


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

Не факт, конечно, но из этого все-таки можно предположить, что речь идет все-таки про 30% окна браузера.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
25.02.2021, 20:40
    #40048773
tors
tors
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Css height в проыентах от ширины?
Есть такой 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, 23:11
    #40048801
fkthat
fkthat
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Css height в проыентах от ширины?
tors,

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

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


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


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