css: дочерний квадратный элемент
233
18 мая 2018, 13:40
Подскажите, можно ли только с помощью одного css сделать следующее
чтобы у дочернего элемента ширина была привязана к ширине родительского элемента, а высота была равна ширине?
При это без использования свойств Viewport: vw, vh
.parent {
width: 75vw;
background: yellow;
}
.child {
background: red;
width: calc(100% - 100px);
height: cal(50%-50%);/* какой-то код, чтобы элемент был квадратным */
}<div class='parent'>
<div class='child'></div>
<div class='other'></div>
</div>Answer 1
:root{
--num:150px;
}
.items{
width:var(--num);
height:200px;
background:red;
}
.item{
width:inherit;
height:var(--num);
background:blue;
transform:translate(20px,20px);
}<div class="items">
<div class="item"></div>
</div>Answer 2
.content {
width: 150px;
margin:0 auto;
}
.wrap-block {
height:0;
padding-bottom:100%;
position:relative;
}
.inner-block {
position:absolute;
width:100%;
height:100%;
background:#f0f;
}<div class="content">
<div class="wrap-block">
<div class="inner-block">
inner
</div>
</div>
</div>
-
12:23
-
20:41
-
06:31
-
21:28
-
22:18
-
08:00
-
13:46
-
10:14
-
18:32
Сборка персонального компьютера от Artline: умный выбор для современных пользователей
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 49914 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31901 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 25877 visits
- Как через css изменить цвет png изображения? 11721 visits
- Blob video url download 11267 visits
- Php curl запрос через прокси с авторизацией 10665 visits
- Работа с captcha vk api 9470 visits
© "hostciti.net" 22.12.2025 | 15:14