css: дочерний квадратный элемент
205
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>
-
13:29
Кофе для программистов: как напиток влияет на продуктивность кодеров?
-
22:13
Рекламные вывески: как привлечь внимание и увеличить продажи
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47923 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30568 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23907 visits
- Как через css изменить цвет png изображения? 10401 visits
- Blob video url download 10006 visits
- Php curl запрос через прокси с авторизацией 9278 visits
- Работа с captcha vk api 8147 visits
© "hostciti.net" 28.3.2025 | 20:32