Отображение изображения в плитке

@Dmitrin · Регистрация: 04.12.2012

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

Здравствуйте. Подскажите, как лучше всего реализовать следующую вещь. Имеется плитка товаров. И этой плитке должно быть изображение 300 пикселей по ширине, 200 пикселей по высоте, например (не само изображение, а обертка для него). Изображения динамически подгружаются с админки. Их размеры и пропорции могут быть совершенно разные. И такой вопрос, как можно универсально хорошо отображать все изображения в такой плитки, независимо от того, горизонтальное оно или вертикальное, и чтобы это изображение полностью занимало обертку.

Я делаю таким образом, но это хорошо отображается только в том случае, если изображения горизонтальные (и то не всегда, бывают белые полосы по бокам).

HTML5

<div class="img_wrapper">
  <img src="photo_1.jpg" alt="">
</div>
<div class="img_wrapper">
  <img src="photo_2.jpg" alt="">
</div>
<div class="img_wrapper">
  <img src="photo_3.jpg" alt="">
</div>
<div class="img_wrapper">
  <img src="photo_4.jpg" alt="">
</div>

CSS

.img_wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
    width: 300px;
    float: left;
    margin: 10px;
}
 
.img_wrapper img {
    height: 100%;
    position: absolute;
    left: -100%;
    right: -100%;
    margin: auto;
    top: 0;
}

@_Exhaust_ · 17.04.2017, 21:48

Рекомендую для верстки вообще использовать bootstrap
Вот конструктор для тренировки и быстрыхх макетов www.layoutit.com/build

@Dmitrin · 17.04.2017, 22:12 **[ТС]**

Я знаю, что такое бутстрап. Суть вопроса вообще в другом была. Верстка просто в качестве примера была приведена

@_Exhaust_ · 18.04.2017, 07:54

Вписать в 300 на 200 пикселей изображение с другими пропорциями без обрезки вряд ли получится. Разве что обрезка средствами css, например clip:rect() здесь может сработать хорошо.
В таких случаях через php генерится миниатюра с задаными размерами, при этом обрезается лишнее или добавляется пространство (в этом случае добавлять наверно нет смысла).

@Shakalaka · 18.04.2017, 10:53

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

И такой вопрос, как можно универсально хорошо отображать все изображения в такой плитки, независимо от того, горизонтальное оно или вертикальное, и чтобы это изображение полностью занимало обертку.

Можно так

HTML5

<div class="img_wrapper">
  <img src="http://www.noirkittymews.com/wp-content/uploads/2015/01/IMG_1376-180x90.jpg" alt="">
</div>
<div class="img_wrapper">
  <img src="http://www.bchumane.org/wp-content/uploads/2014/06/Cat-of-the-Week-Anna-large.jpg" alt="">
</div>
<div class="img_wrapper">
  <img src="https://lh3.googleusercontent.com/MEPCdADX5hpovKMR_GJjbAapiHR69mWcMM9M2KD2knCgvTi6cyeBfDbtB2y45y2qqA=w300" alt="">
</div>

CSS

.img_wrapper {
    position: relative;
    height: 100px;
    overflow: hidden;
    width: 150px;
    float: left;
    margin: 10px;
}
 
.img_wrapper img {
    display: block;
    min-height: 100%;
    min-width:100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

или так

HTML5

<div class="img_wrapper js">
  <img src="http://www.noirkittymews.com/wp-content/uploads/2015/01/IMG_1376-180x90.jpg" alt="">
</div>
<div class="img_wrapper js">
  <img src="http://www.bchumane.org/wp-content/uploads/2014/06/Cat-of-the-Week-Anna-large.jpg" alt="">
</div>
<div class="img_wrapper js">
  <img src="https://lh3.googleusercontent.com/MEPCdADX5hpovKMR_GJjbAapiHR69mWcMM9M2KD2knCgvTi6cyeBfDbtB2y45y2qqA=w300" alt="">
</div>

CSS

.js{
  background-size: cover;
  background-position: center center;
}
.js img{
  display: none;
}

Javascript

$('.js').each(function(){
    var $this = $(this);
    var url = $this.find('img').attr('src');
    $this.css('background-image', 'url("' + url + '")');
});

https://jsfiddle.net/shakalaka/vovxhtsk/

Но в любом случае изображение будет обрезаться, если пропорции не подходят. Для красивого отображения, нужно чтобы тот, кто картинки в админку загружает думал головой, а не тем, чем они обычно думают

@Dmitrin · 18.04.2017, 15:43 **[ТС]**

Shakalaka, Обычно как раз думают не тем, чем нужно)) Спасибо за помощь))

@_Exhaust_ 3 / 3 / 0 Регистрация: 17.03.2013 Сообщений: 64
	17.04.2017, 21:48	2
	Рекомендую для верстки вообще использовать bootstrap Вот конструктор для тренировки и быстрыхх макетов www.layoutit.com/build 1

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
	17.04.2017, 22:12 [ТС]	3
	Я знаю, что такое бутстрап. Суть вопроса вообще в другом была. Верстка просто в качестве примера была приведена 0

@_Exhaust_ 3 / 3 / 0 Регистрация: 17.03.2013 Сообщений: 64
	18.04.2017, 07:54	4
	Вписать в 300 на 200 пикселей изображение с другими пропорциями без обрезки вряд ли получится. Разве что обрезка средствами css, например clip:rect() здесь может сработать хорошо. В таких случаях через php генерится миниатюра с задаными размерами, при этом обрезается лишнее или добавляется пространство (в этом случае добавлять наверно нет смысла). 1

@Dmitrin 23 / 23 / 11 Регистрация: 04.12.2012 Сообщений: 579
	18.04.2017, 15:43 [ТС]	6
	Shakalaka, Обычно как раз думают не тем, чем нужно)) Спасибо за помощь)) 0

Отображение изображения в плитке

Решение