Квадратная картинка на CSS
356
26 мая 2019, 07:40
Как сделать на CSS квадратную картинку? Тоесть имеется несколько картинок, одна 500x100, другая 100x500 обе картинки выводятся параметром width:30%; мне нужно сделать их квадратными, height:30%; использовать глупо.
Answer 1
Один из старых трюков с помощью паддинга "распирать" блок в нужной пропорции. В Вашем случае это 1:1. А саму картинку сделать object-fit: cover;
.block {
width: 30%;
}
.block__inner {
width: 100%;
padding-top: 100%;
background-color: black;
position: relative;
}
.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}<div class="block">
<div class="block__inner">
<img src="https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2017/whatisspacet.jpg" class="image">
</div>
</div>вот пример - https://codepen.io/anon/pen/gQqVXz
-
06:53
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
-
20:42
-
09:21
Основные этапы разработки сайта для стоматологической клиники
-
12:26
-
10:30
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 50299 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31941 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 26275 visits
- Как через css изменить цвет png изображения? 11765 visits
- Blob video url download 11310 visits
- Php curl запрос через прокси с авторизацией 10720 visits
- Работа с captcha vk api 9517 visits
© "hostciti.net" 17.3.2026 | 06:22