Невелике зображення в центрі Div

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

Ми використовуємо текучий макет, тому ширина контейнерів зображень змінюється залежно від ширини сторінки (висота Div встановлюється). Зображення сидить у діалоговому вікні, знецінивши вставку тіні, щоб воно виглядало так, ніби ви переглядаєте сторінку біля зображення.

Саме зображення було розміщене для заповнення навколишнього діва за найширшим можливим значенням (дизайн має max-widthзначення).

Це зробити досить просто, якщо зображення менше, ніж навколишній div:

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

Але коли зображення більше, ніж діва, воно просто починається з лівого краю та знаходиться від центру праворуч (ми використовуємо 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, але сучасне рішення без флексбоксу або абсолютного положення працює так.

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

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

Це центрує його горизонтально:

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/

Для центрування його також можна вертикально використовувати для внутрішнього поділу, але вам знадобиться висота зображення, щоб розмістити його абсолютно всередині нього.

Пізно до гри, але я знайшов цей метод надзвичайно інтуїтивним. 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/

Я величезний шанувальник створення зображення фоном діва / вузла - тоді ви можете просто використовувати 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;
}

Це повинно працювати для вас, якщо ліворуч і верхній частині вашої батьківської діви не у верхній і лівій частині вікна вашого екрана. Це працює для мене.

Я вважав це більш елегантним рішенням, без гнучкості:

.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>