Chrome의 순수한 CSS를 사용하여 높이에 따라 이미지 크기를 동적으로 조정하십시오.

Question

James Montagne's 솔루션 덕분에 CSS를 사용하여 specific behaviour 이미지를 조정하는 1 행 갤러리를 만들었습니다.

위대한 작품 - 크롬 27 이상을 제외하고. 여기서 이미지의 너비는 초기 값으로 유지되지만 높이는 적절하게 조정됩니다.

this Fiddle 또는 아래의 코드를 확인하십시오 :

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 : 나는 이미 Chrome 27 changelog (~ 13메가바이트)를 통해 파고 그러나 어떤을 찾지 못했습니다

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

그 문제에 대한 유용한 정보.

아이디어가 창에서 흐려지는 것을 방지하려면 Chrome> 27에서 크기를 조정하십시오.

Answer 1

CSS로 이미지 크기를 변경하려면 한 치수를 선택하여 다른 치수를 자동으로 조정해야합니다. 당신은 이미지의 폭이 더 관심이 있다면이 경우

는, 당신은 min-height의 없애과 같은 것을 할 수있는 :

body,html{ 
    height: 100%; 
} 

div{ 
    height: 100%; 
    width: 100%; 
    padding: 0; 
} 

img{ 
    float: left; 
    height: auto; 
    vertical-align: top; 
    width: 19%; 
    margin: 0.5%; 
} 

예를 here를 참조하십시오.

5 개의 이미지 행이 있으므로 19% 너비를 div 너비로 사용하고 멋지게 맞춰보세요. 당신이 최소 및 최대 높이를 제어하기 위해 찾고 있다면

한편 EDIT

는, 당신은 용기에 이미지를 래핑 해당 컨테이너에 명시 적으로 높이를 지정하고, 내 이미지를 배치 할 수 있습니다 컨테이너. 여기에서는 원래의 종횡비를 유지하면서 한 줄에 모든 이미지를 유지하는 것을 제어 할 수있는 능력을 상실합니다.

이 예제는 here입니다.