Как задать атрибут у height для автоматической резки изображения?

Question

[doriulbool]

Здравствуйте

Имеется вот такая плитка: большой экран - i.imgur.com/JLdMfTX.jpg, при уменьшении ширины экрана. пропорционально уменьшаются и изображения - i.imgur.com/IEmlUBo.jpg

<div class="first-post">
				   <img src="http://lorempixel.com/700/700/" alt="">
				   </div>
				   <div class="second-post">
				   <img src="http://lorempixel.com/300/300/" alt="">
				   <div class="heading4">Заголовок</div> 
			   </div>
				   <div class="fif-post">
				   <img src="http://lorempixel.com/700/700/" alt="">
				   </div>
				   <div class="fio-post">
				   <img src="http://lorempixel.com/300/300/" alt="">
				   <div class="heading4">Заголовок</div> 
			   </div>

.first-post img, .second-post img, .fif-post img, .fio-post img {
border-radius: 10px; width: 100%;
}

.first-post, .second-post, .fif-post, .fio-post {
padding: 5px;
}

.first-post {
width: 60%;
float: left;
}
.second-post{
width: 40%;
float: right;
}
.fif-post {
width: 60%;
float: right;
}
.fio-post{
width: 40%;
float: right;
}

Если я вставлю изображения без соотношения сторон 1:1, например 16:9, то изображения встанет по ширине и "квадрата" не получится - i.imgur.com/J10yXqJ.jpg . Возможно каким-нибудь образом задать параметр height, для получения подобного эффекта или зафиксировать изображение по центру, обрезав края с помощью overflow:hidden; или же возможно у Вас есть другое решение данного вопроса. Интересует именно простое, тоесть не прибегая к тяжелым java-скриптам или php обработчикам. Если все же в голове всплывает последнее, то прошу озвучить и его.

Позже, для себя решил так:

.first-post img, .second-post img, .fif-post img, .fio-post img {
border-radius: 10px;
display: block;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 -25%;
}

.first-post, .second-post, .fif-post, .fio-post {
display: block;
position: relative;
overflow: hidden;
border-radius: 10px;
border: #fff 5px solid;
}

.first-post {
width: 60%;
padding: 60% 0 0 0;
float: left;
}
.second-post{
width: 40%;
padding: 35% 0 0 0;
float: right;
}
.fif-post {
width: 60%;
padding: 60% 0 0 0;
float: right;
}
.fio-post{
width: 40%;
padding: 35% 0 0 0;
float: right;
}

Только как теперь быть с контентом, который должен находиться под маленькими плитками?

Answer 1

[trushka]

Используйте вместо изображений background'ы:

<div class="first-post" style="background-image: url(http://lorempixel.com/700/700/)"></div>
........

.first-post, .second-post, .fif-post, .fio-post {
  border-radius: 10px; margin: 5px;
  background: transparent center/cover
}
.first-post {
  width: calc(60% - 10px);
  height: calc(60% - 10px);
  float: left;
}
.... и так далее

Только у контейнера не должна быть явно задана высота и не должна быть position: absolute или fixed, ато блоки квадратными не получатся.. С другой стороны, если это всё на весь экран, то вместо % для ширины и высоты лучше vw использовать

Comments

[doriulbool]

Безусловно, с помощью background это решить гораздо проще. Сейчас сделал следующее, получается почти ровные квадраты при любом разрешении экрана:

.first-post img, .second-post img, .fif-post img, .fio-post img {
border-radius: 10px;
display: block;
max-height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 -25%;
}

.first-post, .second-post, .fif-post, .fio-post {
display: block;
position: relative;
overflow: hidden;
border-radius: 10px;
border: #fff 5px solid;
}

.first-post {
width: 60%;
padding: 60% 0 0 0;
float: left;
}
.second-post{
width: 40%;
padding: 35% 0 0 0;
float: right;
}
.fif-post {
width: 60%;
padding: 60% 0 0 0;
float: right;
}
.fio-post{
width: 40%;
padding: 35% 0 0 0;
float: right;
}

Answer 2

[doriulbool]

С помощью mansory вроде как можно, опять же решение считаю громозким для 4 плиток. Есть ещё варианты?