Центрируйте негабаритное изображение в Div

Я пытался разобраться, как центрировать увеличенное изображение внутри div, используя только CSS.

Мы используем гибкий макет, поэтому ширина контейнеров с изображениями зависит от ширины страницы (высота div фиксирована). Изображение находится внутри элемента div со значением вставной тени, чтобы оно выглядело так, как будто вы просматриваете страницу на изображении.

Само изображение было изменено по размеру, чтобы заполнить окружающий элемент с максимально широким значением (дизайн имеет max-widthзначение).

Это довольно легко сделать, если изображение меньше окружающего элемента div:

margin-left: auto;
margin-right: auto;
display: block; 

Но когда изображение больше, чем div, оно просто начинается с левого края и смещается от центра вправо (мы используем overflow: hidden).

Мы могли бы назначить width=100%, но браузеры делают паршивую работу по изменению размера изображений, а веб-дизайн сосредотачивается вокруг высококачественных изображений.

Какие-нибудь идеи по центрированию изображения так, чтобы overflow:hiddenобрезать оба края равномерно?

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

.parent {
    position: relative;
    overflow: hidden;
    //optionally set height and width, it will depend on the rest of the styling used
}

.child {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;

}

Это старый Q, но современное решение без flexbox или абсолютного положения работает следующим образом.

margin-left: 50%;
transform: translateX(-50%);

.outer {
  border: 1px solid green;
  margin: 20px auto;
  width: 20%;
  padding: 10px 0;
  /*   overflow: hidden; */
}

.inner {
  width: 150%;
  background-color: gold;
  /* Set left edge of inner element to 50% of the parent element */
  margin-left: 50%; 
  /* Move to the left by 50% of own width */
  transform: translateX(-50%); 
}

<div class="outer">
  <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos exercitationem error nemo amet cum quia eaque alias nihil, similique laboriosam enim expedita fugit neque earum et esse ad, dolores sapiente sit cumque vero odit! Ullam corrupti iure eum similique magnam voluptatum ipsam. Maxime ad cumque ut atque suscipit enim quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi impedit esse modi, porro quibusdam voluptate dolores molestias, sit dolorum veritatis laudantium rem, labore et nobis ratione. Ipsum, aliquid totam repellendus non fugiat id magni voluptate, doloribus tenetur illo mollitia. Voluptatum.</div>
</div>

Так почему же это работает?
На первый взгляд кажется, что мы сдвигаемся на 50% вправо, а затем снова на 50% влево. Это приведет к смещению нуля, и что?
Но 50% - это не одно и то же, потому что важен контекст. Если вы используете относительные единицы измерения, поле будет рассчитываться в процентах от ширины родительского элемента, а преобразование будет на 50% относительно того же элемента.

У нас есть такая ситуация, прежде чем мы добавим CSS

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
       +-----------------------------------------------------------+
       | Element E                                                 |
       +-----------------------------------------------------------+
       |                                           |
       +-------------------------------------------+

С добавленным стилем margin-left: 50%мы имеем

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
       |                     +-----------------------------------------------------------+
       |                     | Element E                                                 |
       |                     +-----------------------------------------------------------+
       |                     |                     |
       +---------------------|---------------------+
       |========= a ========>|

       a is 50% width of P

И transform: translateX(-50%)сдвиг назад влево

       +-------------------------------------------+
       | Parent element P of E                     |
       |                                           |
+-----------------------------------------------------------+
| Element E                 |                               |
+-----------------------------------------------------------+
|<============ b ===========|                      |
       |                    |                      |
       +--------------------|----------------------+
       |========= a =======>|

       a is 50% width of P
       b is 50% width of E

К сожалению, это работает только для горизонтального центрирования, так как процентное соотношение маржи всегда зависит от ширины. Т.е. не только margin-leftи margin-right, но также margin-topи margin-bottomрассчитываются по ширине.

Совместимость браузера не должна быть проблемой: https://caniuse.com/#feat=transforms2d

Поместите большой div внутри div, центрируйте его, и центр изображения внутри этого div.

Это центрирует его горизонтально:

HTML:

<div class="imageContainer">
  <div class="imageCenterer">
    <img src="http://placekitten.com/200/200" />
  </div>
</div>

CSS:

.imageContainer {
  width: 100px;
  height: 100px;
  overflow: hidden;
  position: relative;
}
.imageCenterer {
  width: 1000px;
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -500px;
}
.imageCenterer img {
  display: block;
  margin: 0 auto;
}

Демо: http://jsfiddle.net/Guffa/L9BnL/

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

Поздно к игре, но я нашел этот метод чрезвычайно интуитивно понятным. https://codepen.io/adamchenwei/pen/BRNxJr

CSS

.imageContainer {
  border: 1px black solid;

  width: 450px;
  height: 200px;
  overflow: hidden;
}
.imageHolder {
  border: 1px red dotted;

  height: 100%;
  display:flex;
  align-items: center;
}
.imageItself {
  height: auto;
  width: 100%;
  align-self: center;

}

HTML

<div class="imageContainer">
  <div class="imageHolder">
    <img class="imageItself" src="http://www.fiorieconfetti.com/sites/default/files/styles/product_thumbnail__300x360_/public/fiore_viola%20-%202.jpg" />
  </div>
</div>

Не используйте фиксированную или явную ширину или высоту для тега изображения. Вместо этого кодируйте это:

      max-width:100%;
      max-height:100%;

Например: http://jsfiddle.net/xwrvxser/1/

Я большой поклонник создания изображения в качестве фона div / узла - тогда вы можете просто использовать background-position: centerатрибут для его центрирования независимо от размера экрана

Ширина и высота только для примера:

parentDiv{
    width: 100px;
    height: 100px;
    position:relative; 
}
innerDiv{
    width: 200px;
    height: 200px;
    position:absolute; 
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Это должно работать для вас, если левая и верхняя часть вашего родительского div не являются самой верхней и левой частью окна вашего экрана. Меня устраивает.

Я обнаружил, что это более элегантное решение без flex:

.wrapper {
    overflow: hidden;
}
.wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* height: 100%; */ /* optional */
}

Опираясь на отличный ответ @ yunzen:

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

Вот идеальный CSS для такого фонового изображения (используйте его на <img>теге):

/* Set left edge of inner element to 50% of the parent element */
margin-left: 50%;

/* Move to the left by 50% of own width */
transform: translateX(-50%);

/* Scale image...(101% - instead of 100% - avoids possible 1px white border on left of image due to rounding error */
width: 101%;

/* ...but don't scale it too small on mobile devices - adjust this as needed */
min-width: 1086px;

/* allow content below image to appear on top of image */
position: absolute;
z-index: -1;

/* OPTIONAL - try with/without based on your needs */
top: 0;

/* OPTIONAL - use if your outer element containing the img has "text-align: center" */
left: 0;

Один из вариантов, который вы можете использовать, - object-fit: coverон немного похож background-size: cover. Подробнее об объекте .

игнорируйте все JS ниже, это только для демонстрации.

Ключевым моментом здесь является то, что вам нужно установить изображение внутри оболочки и дать ему следующие свойства.

.wrapper img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

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

Единственным недостатком object-fitявляется то, что он не работает на IE11.

// for demo only
const wrapper = document.querySelector('.wrapper');
const button = document.querySelector('button');
const widthInput = document.querySelector('.width-input');
const heightInput = document.querySelector('.height-input');


const resizeWrapper = () => {
  wrapper.style.width = widthInput.value + "px";
  wrapper.style.height = heightInput.value + "px";
}

button.addEventListener("click", resizeWrapper);

.wrapper {
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 2em;
  border: 1px solid red;
}

.wrapper img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="wrapper">
  <img src="https://i.imgur.com/DrzMS8i.png">
</div>


<!-- demo only -->
<lable for="width">
  Width: <input name="width" class='width-input'>
</lable>
<lable for="height">
  height: <input name="height" class='height-input'>
</lable>
<button>change size!</button>