CSS: Jak ustawić rozmiar obrazu w stosunku do wzrostu rodzica?

Próbuję wymyślić, jak zmienić rozmiar obrazu, aby zachować stosunek szerokości do wysokości, ale zostanie zmieniony, aż wysokość obrazu będzie zgodna z wysokością zawierającego div. Mam te obrazy, które są dość duże i długie (zrzuty ekranu) i chcę je umieścić w div o szerokości 200 pikseli i wysokości 180 pikseli do wyświetlania i bez ręcznej zmiany rozmiaru obrazów. Aby wyglądało dobrze, boki obrazu muszą być przepełnione i ukryte za pomocą zawierającego element div. Oto, co mam do tej pory:

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%;
}

Jak widać, na kontenerze nadrzędnym obrazów jest szary kolor, który w ogóle nie powinien być wyświetlany. Aby ten pojemnik był całkowicie wypełniony, szerokość musi być równomiernie przelana po obu stronach. czy to możliwe? Czy można też uwzględnić zbyt wysoki obraz?

Oryginalna odpowiedź:

Jeśli jesteś gotowy, aby wybrać CSS3, możesz użyć właściwości translacji css3. Zmień rozmiar na podstawie tego, co jest większe. Jeśli Twój wzrost jest większy, a szerokość mniejsza niż kontenera, szerokość zostanie rozciągnięta do 100%, a wysokość zostanie obcięta z obu stron. To samo dotyczy większej szerokości.

Twoja potrzeba, 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>

I 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%);
}

Voila! Działający: http://jsfiddle.net/shekhardesigner/aYrhG/

Wyjaśnienie

DIV jest ustawiony na relativepozycję. Oznacza to, że wszystkie elementy podrzędne otrzymają współrzędne początkowe (początki), z którego zaczyna się ten DIV.

Obraz jest ustawiony jako element BLOK, min-width/heightoba ustawione na 100% oznaczają zmianę rozmiaru obrazu, bez względu na jego rozmiar, tak aby był minimum 100% jego elementu nadrzędnego. minjest kluczem. Jeśli o min-height wysokość obrazka przekroczyła wysokość rodzica, nie ma problemu. Sprawdzi, czy min-width i spróbuje ustawić minimalną wysokość na 100% rodziców. Oba są odwrotnie. Zapewnia to brak luk wokół elementu div, ale obraz jest zawsze nieco większy i jest przycinany ooverflow:hidden;

Teraz imagejest to ustawione w absolutepozycji z left:50%i top:50%. Oznacza przesunięcie obrazu o 50% od góry i w lewo, upewniając się, że pochodzenie pochodzi z DIV. Jednostki lewa / góra są mierzone od rodzica.

Magiczna chwila:

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

Teraz ta translatefunkcja transformwłaściwości CSS3 przenosi / repozycjonuje dany element. Ta właściwość dotyczy zastosowanego elementu, stąd wartości (x, y) LUB (-50%, -50%) oznaczają przesunięcie negatywu obrazu w lewo o 50% rozmiaru obrazu i przejście do negatywu na górę o 50% rozmiaru obrazu .

Na przykład. jeśli rozmiar obrazu wynosił 200 pikseli × 150 pikseli, transform:translate(-50%, -50%)zostanie obliczone do przetłumaczenia (-100px, -75px). Jednostka% pomaga, gdy mamy różne rozmiary obrazu.

Jest to po prostu trudny sposób na ustalenie centroidu obrazu i nadrzędnego DIV i dopasowanie ich.

Przepraszamy za zbyt długie wyjaśnianie!

Zasoby, aby przeczytać więcej:

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

Zmień swój kod:

a.image_container img {
    width: 100%;
}

Do tego:

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/

Użyj max-widthwłaściwości CSS, na przykład:

img{
  max-width:100%;
}

Jeśli weźmiesz odpowiedź Shekhar K. Sharma i prawie działa, musisz również dodać to height: 1px;lub to, width: 1px;ponieważ musi działać.

możesz użyć do tego flex boxu ... to rozwiąże twój problem

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

Jeśli wszystko, co próbujesz zrobić, to wypełnić div, może to pomóc komuś innemu, jeśli współczynnik proporcji nie jest ważny, reaguje.

.img-fill > img {
  min-height: 100%;
  min-width: 100%;  
}