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

225

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>