Квадратная картинка на CSS

278
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

READ ALSO
Формат даты с часовым поясом в moment.js
javascript

Формат даты с часовым поясом в moment.js

У меня есть дата в формате "Fri, 30 Nov 2018 16:00:00 -0500"Мне нужно ее отформатировать как "MM/DD/YYYY HH:mm A"

 155
Owl Carousel 2 - не изменяется размер owl-stage
javascript

Owl Carousel 2 - не изменяется размер owl-stage

Такая проблема: Я подключил Owl-Carousel успешно на сайтОн у меня установлен во весь экран компьютера (w:100%; h:100%), но когда я открываю боковое меню...

 168
Изменить txt при нажатии на Enter
javascript

Изменить txt при нажатии на Enter

Как сделать чтобы при нажатии на кнопку Enter у меня в textarea с id = 'txt', менялся текст при условии того, что я написал что-то?

 163
React с запросами к серверу без redux
javascript

React с запросами к серверу без redux

исследую возможности реактredux не использую по незнанию и отсутствию времени

 154