CSS изображения Изменения размера по Высоте

Question

Я знаю изображения изменения размера техники изменения пропорций изображения на основе ширины:

img{ 
    max-width: 100%; 
    height: auto; 
} 

мне нужно сделать то же самое, только на основе высоты родителя, а не по ширине , Я пробовал следующее без эффекта:

img{ 
    width: auto; 
    max-height: 100%; 
} 

Надеюсь, я объясню это достаточно хорошо.

Пожалуйста, помогите :)

Answer 1

max-height будет ограничивать только высоту, чтобы быть меньше заданного значения.

Если вы хотите, чтобы быть таким же, как его родитель .. дать как height: 100%

, следовательно, это должно работать: CSS:

img{ 
    height: 100%; // changed max-height to height here 
    width: auto; // this is optional 
} 

Answer 2

Вы не можете эффективно строить его на использовании стандартной высоты css, но вы можете сделать, чтобы height относились непосредственно к изображению width для более гибкой компоновки. Попробуйте следующее:

img { 
    position: relative; 
    width: 50%;  /* desired width */ 
} 
img:before{ 
    content: ""; 
    display: block; 
    padding-top: 100%; /* initial ratio of 1:1*/ 
} 

Answer 3

Я пробовал это, и это сработало.

<div class="parent"> 
    <img src="http://searchengineland.com/figz/wp-content/seloads/2014/07/google-logo-sign-1920-600x337.jpg" alt="..." /> 
</div> 


.parent { 
    width: 100%; 
    height: 180px; 
    overflow: hidden; 
} 

посмотреть здесь https://jsfiddle.net/shuhad/vaduvrno/