순수 CSS를 사용하여 높이 당 이미지를 동적으로 스케일하는 방법은 무엇입니까?

Question

이것은 CSS 전문가에게갑니다 :

순수한 CSS를 사용하여 this site과 같은 이미지 크기 조정 동작을 수행 할 수 있습니까?

이미지의 너비가 아니라 브라우저 창의 높이가 변경되면 크기 조정 만 시작된다는 점에 유의하십시오. (단지 내가 발견 한 웹의 모든 정보가 너비의 변경에 관한 것이기 때문에 말하기 만하면됩니다.)

실제 고정 점은 서로 다른 임계 값으로 보입니다. 가로 모양의 이미지는 높이가 같으면 축소하기 시작합니다. 이미 축소 된 초상화 모양의 이미지와 같습니다.

그 문제에 대한 의견은 높이 평가됩니다!

Answer 1

max-height, min-height, white-space 및 % 높이의 조합으로 설정할 수 있습니다. 유일한 부정적인 점은 각 이미지가 수직 또는 수평인지를 결정하는 클래스를 가져야한다는 것입니다.

http://jsfiddle.net/Rgp6h/

예 HTML :

<div> 
    <img src="http://placekitten.com/200/300" class="vert"/> 
    <img src="http://placekitten.com/500/200" class="horiz"/> 
    <img src="http://placekitten.com/200/300" class="vert"/> 
    <img src="http://placekitten.com/400/300" class="horiz"/> 
    <img src="http://placekitten.com/200/300" class="vert"/> 
</div> 

CSS : 귀하의 의견

body,html{ 
    height: 100%; 
} 

div{ 
white-space: nowrap; 
    height: 100%; 
} 

img{ 
    min-height: 200px; 
    height: 100%; 
    vertical-align: top; 
} 

.horiz{ 
    max-height: 300px; 
} 

.vert{ 
    max-height: 500px; 
} 

Answer 2

JavaScript를 사용하는 것만으로도 충분하다고 생각하지만 필요에 따라 크기 기반의 크기 또는 미디어 쿼리를 사용할 수 있습니다.

.coolImg { 
    height: 50%; 
} 
@media all and (max-height: 600px) { 
    .coolImg { 
     height: 50%; 
    } 
} 

시도한 방법에 대한 몇 가지 코드를 공유하면 해결책을 더 구체적으로 시도해 볼 수 있습니다.