Изображение большого негабаритного изображения в div

Я пытаюсь разобраться, как центрировать негабаритный образ внутри div, используя только css.

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

Изображение само по себе имеет размер, чтобы заполнить окружающий div с максимально возможным значением (дизайн имеет значение максимальной ширины).

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

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

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

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

Любые идеи по центрированию изображения, так что переполнение: скрытый разрезает оба края равномерно?

Спасибо

Ответ 1

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

.parent {
    position: relative;
    overflow: hidden;
}

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

}

Ответ 2

Это старый Q, но современное решение без flexbox или position absolute работает как это.

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>

Ответ 3

Поместите большой 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, но вам понадобится высота изображения, чтобы поместить его абсолютно внутри него.

Ответ 4

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

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

ex: http://jsfiddle.net/xwrvxser/1/

Ответ 5

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

Ответ 6

Поздно к игре, но я обнаружил, что этот метод чрезвычайно интуитивно понятен. 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-item: 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>

Ответ 7

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

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 не являются самой верхней и левой частью окна вашего экрана. Это работает для меня.

Ответ 8

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

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