Как сверстать картинку по ширине и высоте в квадратный див не растягивая?

226
04 октября 2017, 10:15

Добрый день! Помогите с верской картинки. Есть квадратный див с картинкой (точнее галереей) в которой есть картинки как прямоугольные вертикальные и горизонтальные. Как вместить не растягивая их в квадратныйдив.Если ширину ствить 100% тогда горизонтальные картинки получаются обрезанные и наоборот. CSS

Answer 1

* { 
  box-sizing: border-box; 
} 
 
.block { 
  width: 300px; 
  height: 300px; 
  background: yellow; 
  position: relative; 
  border: #000 solid 1px; 
} 
 
img { 
  border: #f00 solid 2px; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  transform: translate(-50%, -50%); 
  max-width: 100%; 
  max-height: 100%; 
}
<div class="block"> 
  <img src="https://thumb1.shutterstock.com/display_pic_with_logo/518803/129310280/stock-photo-a-bird-s-eye-view-of-shanghai-at-dusk-129310280.jpg" alt="" /> 
</div> 
<div class="block"> 
  <img src="https://thumb1.shutterstock.com/display_pic_with_logo/2324765/484954783/stock-photo-top-view-aerial-photo-from-flying-drone-of-a-hongkong-global-city-with-development-buildings-484954783.jpg" alt="" /> 
</div> 
<div class="block"> 
  <img src="https://thumb7.shutterstock.com/display_pic_with_logo/691720/101264377/stock-photo-new-york-city-street-old-style-image-101264377.jpg" alt="" /> 
</div>

Answer 2

Вот несколько вариантов:

body{ 
  text-align:center; 
} 
 
div { 
  display: inline-block; 
  position: relative; 
  height: 150px; 
  width: 150px; 
  margin: 1rem; 
  overflow: hidden; 
} 
 
.one { 
  border: 4px solid red; 
  line-height:150px; 
} 
 
.one img { 
  display: inline-block; 
  max-height: 100%; 
  max-width: 100%; 
  vertical-align:middle; 
} 
 
.two { 
  border: 4px solid green; 
  background-size: cover; 
  background-position: center; 
  background-repeat:none; 
} 
 
.three { 
  border: 4px solid orange; 
} 
 
.three img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  -o-object-fit: cover; 
  object-position: middle; 
}
<div class="one"><img src="http://nwlife.ru/wp-content/gallery/fotooboi-priroda/%D0%BF%D1%80%D0%B8%D1%80%D0%BE%D0%B4%D0%B0-105.jpg"></div> 
 
<div class="one"><img src="http://68.media.tumblr.com/tumblr_megli86khL1rebzwto1_1280.jpg"></div> 
 
<br><div class="two" style="background-image:url(http://nwlife.ru/wp-content/gallery/fotooboi-priroda/%D0%BF%D1%80%D0%B8%D1%80%D0%BE%D0%B4%D0%B0-105.jpg)"></div> 
 
<div class="two" style="background-image:url(http://68.media.tumblr.com/tumblr_megli86khL1rebzwto1_1280.jpg)"></div> 
 
<br><div class="three"><img src="http://nwlife.ru/wp-content/gallery/fotooboi-priroda/%D0%BF%D1%80%D0%B8%D1%80%D0%BE%D0%B4%D0%B0-105.jpg"></div> 
 
<div class="three"><img src="http://68.media.tumblr.com/tumblr_megli86khL1rebzwto1_1280.jpg"></div>

Answer 3

Возможно я неправильно вас понял, но вот это свойство должно помочь

background-size: cover;

И отцентрировать background-position: center;

READ ALSO
Оцените код тестов

Оцените код тестов

Сделал тесты, без БД и файлов и ответов нету в браузере

191
SugarCrm CE 6.5: Где происходит загрузка subpanels?

SugarCrm CE 6.5: Где происходит загрузка subpanels?

Ребят есть у меня готовый код который высчитывает время загрузки того или иного кодав коде предусматривается получение названия субпанели

131
Редактирование документов Google Spreadsheets через api без использования OAuth2

Редактирование документов Google Spreadsheets через api без использования OAuth2

Всем привет! Задача заключается в том, что есть некоторый скрипт, принимающий ID документа (например, в ссылке https://docsgoogle

264
php find exact match and delete

php find exact match and delete

Есть код который ищет число в файле, и удаляет его если оно присутствует, а если нет то ничего не делает:

163