Как сделать квадратный 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 не отлажу.

Новые блоги и статьи
Как программировать под HCL Notes и создавать свои продукты на ее основе InfoMaster 11.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой мощную платформу для разработки корпоративных приложений, которая сочетает в себе функции электронной почты, календаря,. . .	Как работать с SVN (Subversion) InfoMaster 11.01.2025 Введение Система контроля версий является неотъемлемой частью современного процесса разработки программного обеспечения. Она обеспечивает управление изменениями в коде, позволяет отслеживать. . .	Использование GraphQL в JavaScript InfoMaster 11.01.2025 Введение в GraphQL и его преимущества В современной разработке веб-приложений эффективный обмен данными между клиентом и сервером играет ключевую роль. GraphQL представляет собой язык запросов и. . .	Администрирование Git, продвинутые техники работы с Git InfoMaster 11.01.2025 Основы управления репозиторием Эффективное управление Git-репозиторием требует глубокого понимания механизмов контроля доступа и инструментов администрирования. Рассмотрим ключевые аспекты. . .	Что такое HCL Notes и как с ним работать InfoMaster 10.01.2025 HCL Notes (ранее известный как IBM Notes и Lotus Notes) представляет собой комплексную платформу для совместной работы и обмена информацией в корпоративной среде. Это многофункциональное решение,. . .	Как работать с Git из Windows и Visual Studio InfoMaster 10.01.2025 Работа с Git в Windows Работа с Git в операционной системе Windows может быть осуществлена с помощью различных инструментов, каждый из которых обладает своими уникальными возможностями и. . .
Аналог оператора switch case в Python InfoMaster 10.01.2025 Оператор switch case используется в программировании для выбора одного из нескольких вариантов исполнения кода. Однако в языке Python этот оператор отсутствует. Понимание аналогов switch case в. . .	Отличия абстрактного класса от интерфейса InfoMaster 10.01.2025 В современной разработке программного обеспечения существуют два основных механизма реализации абстракции: абстрактные классы и интерфейсы. Эти инструменты, хотя и схожи в своей основной цели -. . .	Как работать в Git InfoMaster 10.01.2025 Git — это одна из наиболее популярных систем контроля версий, которая активно используется разработчиками по всему миру. Она позволяет эффективно управлять изменениями в коде, координировать работу. . .	Реализация передвижения персонажа в Unity3d на C# InfoMaster 10.01.2025 Реализация передвижения персонажа в Unity3D начинается с правильной настройки проекта. Этот этап критически важен для создания отзывчивого и плавного управления. Рассмотрим основные шаги для создания. . .	Docker: руководство для начинающих InfoMaster 10.01.2025 В современном мире разработки программного обеспечения контейнеризация стала неотъемлемой частью процесса создания и развертывания приложений. Docker, как ведущая платформа контейнеризации, произвела. . .	Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .

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

@AlexZaw Модератор 2352 / 1720 / 668 Регистрация: 07.08.2016 Сообщений: 4,050
	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