Выравнивание выступающего из контейнера изображения по центру

Создание миниатюр с помощью CSS

Понравилась статья? Оставьте оценку:

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)

На днях столкнулся с задачей — с помощью верстки обрезать изображения по ширине и уменьшать по высоте до размеров контейнера. Естественно, пропорции изображения не должны «ломаться» при этом.

Организуем такое выравнивание на примере простого контейнера шириной 400х300 пикселей и изображения по размеру большего чем наш контейнер (например возьмем изображение гор, размером 720х450):

Вставим наше изображение в контейнер

<style>
.container{
  width: 400px;
  height: 300px;
  overflow: hidden;
}
</style>
<div class="container">
  <img src="img1.jpg" />
</div>

Получим такую картину:

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

Шаг первый. Выравнивание обрезаемого изображения по горизонтали

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

<style>
.container{
  width: 400px;
  height: 300px;
  overflow: hidden;
}
.container-inner{
  position: relative;
  display: inline-block;
  right: -50%;
}
img{
 position: relative;
  left: -50%;
}
</style>
<div class="container">
<div class="container-inner">
  <img src="img1.jpg" />
</div>
</div>

Результат:

Обрезка с выравниванием

Как видим по горизонтали добились нужного эффекта, переходим ко второму шагу.

Шаг второй. Пропорционально уменьшим изображение по высоте до размеров контейнера

Дополним css стили:

<style>
.container{
  width: 400px;
  height: 300px;
  overflow: hidden;
}
.container-inner{
  position: relative;
  display: inline-block;
  right: -50%;
}
img{
 position: relative;
  left: -50%;
height: 100%;
width: auto;
}
</style>
<div class="container">
<div class="container-inner">
  <img src="img1.jpg" />
</div>
</div>

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

Верстка миниатюр

Оставить комментарий