Как сделать квадратный div и вписать в него картинку

@trufanov · Регистрация: 08.07.2014

Author24 — интернет-сервис помощи студентам

Никак не могу сообразить как сделать квадратный div и вписать в него произвольную картинку.

HTML5

1
2
3

<div style='width:20%'>
   <img>
</div>

Ширина блока 20% от родителя. Высота должна получиться равной ширине.

Картинка может быть горизонтальной или вертикальной, вся должна находиться внутри блока.

С шириной так справился

CSS

1	img {max-width: 100%}

А вот с высотой беда. Вертикальная картинка растягивает блок вниз.

Как-то можно обойтись только css?

@AlexZaw · 31.10.2018, 22:24

Сообщение от trufanov

Высота должна получиться равной ширине.

Не должна. Если высота не задана то, по умолчанию, она равна высоте контента.

Сообщение от trufanov

Как-то можно обойтись только css?

Как то так:

HTML5

<div class="wrap">
  <div class="in">
    <img src="http://placekitten.com/250/150" alt="">
  </div>
    <div class="in">
    <img src="http://placekitten.com/150/250" alt="">
  </div>
</div>

CSS

.wrap{
  width: 500px;
  border: 1px solid red;
}
.in{
  width: 20%;
  padding-top: 20%;
  outline: 1px solid;
  position: relative;
} 
img{
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
 
}

границы заданы просто для наглядности

@trufanov · 01.11.2018, 14:57 **[ТС]**

Сообщение от AlexZaw

Не должна.

Возможно, не так выразился. Должна в смысле мне так нужно.

Ваш код работает, div-ы одинаковые, квадратные. Картинки без искажения.

Просьба пояснить в чем фокус. Не могу понять за счет чего так получается.

@AlexZaw · 01.11.2018, 15:27

Сообщение от trufanov

Просьба пояснить в чем фокус.

Фокус в padding-ах. Если padding (да и margin) задавать в процентах, они рассчитываются от ширины родителя.
Поэтому и получается, что ширина и высота элемента равна 20% от ширины родителя.
Ну а картинка позиционирована абсолютно что-бы паддинг ее не отталкивал вниз.

@trufanov · 11.11.2018, 19:14 **[ТС]**

Сообщение от AlexZaw

width: 20%; padding-top: 20%;

Оказалось, что в Firefox это не работает.

В Opera не проверял, но это и не важно пока в Firefox не отлажу.

@trufanov 5 / 5 / 2 Регистрация: 08.07.2014 Сообщений: 569
	01.11.2018, 14:57 [ТС]	3
	Сообщение от AlexZaw Не должна. Возможно, не так выразился. Должна в смысле мне так нужно. Ваш код работает, div-ы одинаковые, квадратные. Картинки без искажения. Просьба пояснить в чем фокус. Не могу понять за счет чего так получается. 0

@AlexZaw Модератор 2338 / 1707 / 667 Регистрация: 07.08.2016 Сообщений: 4,037
	01.11.2018, 15:27	4
	Сообщение от trufanov Просьба пояснить в чем фокус. Фокус в padding-ах. Если padding (да и margin) задавать в процентах, они рассчитываются от ширины родителя. Поэтому и получается, что ширина и высота элемента равна 20% от ширины родителя. Ну а картинка позиционирована абсолютно что-бы паддинг ее не отталкивал вниз. 0

@trufanov 5 / 5 / 2 Регистрация: 08.07.2014 Сообщений: 569
	11.11.2018, 19:14 [ТС]	5
	Сообщение от AlexZaw width: 20%; padding-top: 20%; Оказалось, что в Firefox это не работает. В Opera не проверял, но это и не важно пока в Firefox не отлажу. 0