CSS: Як я можу встановити розмір зображення щодо батьківської висоти?

Я намагаюся зрозуміти, як змінити розмір зображення, щоб воно зберігало співвідношення ширини до висоти, але отримувало розмір, поки висота зображення не збігається з висотою вміщуваного div. У мене є такі зображення, які є досить великими та довгими (скріншоти), і я хочу розмістити їх у ширині 200 пікселів, висоті 180 пікселів для відображення та без перерозміру зображень вручну. Щоб це виглядало добре, сторони зображення повинні переповнюватися і бути прихованими за допомогою div, що містить. Це те, що я маю дотепер:

http://jsfiddle.net/f9krj/2/

HTML

<a class="image_container" href="http://www.skintype.ca/assets/background-x_large.jpg">
    <img src="http://www.skintype.ca/assets/background-x_large.jpg" alt="" />
</a>

CSS

a.image_container {
    background-color: #999;
    width: 200px;
    height: 180px;
    display: inline-block;
    overflow: hidden;
}
a.image_container img {
    width: 100%;
}

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

Оригінальна відповідь:

Якщо ви готові вибрати CSS3, ви можете використовувати властивість css3 translate. Змінюйте розмір залежно від того, що більше. Якщо ваша висота більша, а ширина менша за контейнер, ширина буде розтягнута до 100%, а висота буде обрізана з обох боків. Те саме стосується і більшої ширини.

Ваші потреби, HTML:

<div class="img-wrap">
  <img src="http://lorempixel.com/300/160/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/300/200/nature/" />
</div>
<div class="img-wrap">
  <img src="http://lorempixel.com/200/300/nature/" />
</div>

І CSS:

.img-wrap {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

div > img {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

Вуаля! Працює: http://jsfiddle.net/shekhardesigner/aYrhG/

Пояснення

DIV встановлено в relativeположення. Це означає, що всі дочірні елементи отримають початкові координати (початкові координати), звідки починається цей DIV.

Зображення встановлено як елемент BLOCK, min-width/heightобидва встановлені на 100%, це означає, що розмір зображення, незалежно від його розміру, має бути мінімальним на 100% від батьківського. minє ключовим. Якщо на мінімальну висоту висота зображення перевищувала батьківський, не біда. Він буде шукати, якщо мінімальна ширина, і спробувати встановити мінімальний зріст, рівний 100% батьків. І те, і інше йде навпаки. Це гарантує відсутність прогалин навколо div, але зображення завжди трохи більше і обрізаєтьсяoverflow:hidden;

Тепер imageце встановлено в absoluteположення з left:50%і top:50%. Засоби відсувають зображення на 50% зверху та ліворуч, переконуючись, що початок береться з DIV. Ліва / верхня одиниці вимірюються від батьківської.

Чарівний момент:

transform: translate(-50%, -50%);

Тепер ця translateфункція CSS3transform переміщує / змінює позицію відповідного елемента. Ця властивість стосується застосованого елемента, отже значення (x, y) АБО (-50%, -50%) означають переміщення від’ємного зображення вліво на 50% від розміру зображення та переміщення в негативний верх на 50% від розміру зображення .

Напр. якщо розмір зображення був 200px × 150px, transform:translate(-50%, -50%)обчислюється для перекладу (-100px, -75px). % одиниці допомагає, коли ми маємо різний розмір зображення.

Це лише хитрий спосіб з’ясувати центроїд зображення та батьківський DIV та зіставити їх.

Вибачення за те, що вам потрібно занадто довго пояснювати!

Ресурси для читання далі:

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate
• https://css-tricks.com/centering-css-complete-guide/

Змініть свій код:

a.image_container img {
    width: 100%;
}

До цього:

a.image_container img {
    width: auto; // to maintain aspect ratio. You can use 100% if you don't care about that
    height: 100%;
}

http://jsfiddle.net/f9krj/5/

Використовуйте max-widthвластивість CSS, наприклад:

img{
  max-width:100%;
}

Якщо ви берете відповідь Shekhar K. Sharma, і це майже спрацьовує, вам також потрібно додати до цього те height: 1px;чи інше, width: 1px;оскільки робота має працювати.

Ви можете використовувати для цього флекс-бокс .. це вирішить вашу проблему

.image-parent 
{
     height:33px; 
     display:flex; 
}