여러 유체 이미지

Question

이미지가있는 간단한 컨테이너가 있습니다. 나는 IMG 스타일 max-width: 100%;을 설정하면

<div class="container" style="width:800px;"> 
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"> 
</div> 

컨테이너는 폭 변경하고 내부의 이미지를 확장 할 수 있습니다. 완전한.

그러나 컨테이너 내부에 몇 개의 이미지가 있으면 어떻게됩니까? 그렇게.

<div class="container" style="width:800px; background:red;"> 
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"> 
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"> 
    <img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"> 
</div> 

위 코드는 컨테이너 높이를 확장하여 다음 줄로 확장 및 오버플로를 수행하지 않습니다.

순수 CSS로 고정 너비에 맞게 이미지 크기를 균일하게 만들려면 어떻게해야합니까? 심지어 가능할까요?

샌드 박스 : 당신은 HTML의 구조를 변경하고자하는 경우 http://tinkerbin.com/ijy5zgH3

Answer 1

적합하지만, 그 경우에, 당신은 img {max-width: 100%;}을 유지할 수 있지만 <table>

<table class="container" style="width:800px;"> 
    <tr> 
     <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td> 
     <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td> 
     <td><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></td> 
    </tr> 
</table> 

01,235에 의존하지 않음

Answer 2

이 작동합니다.

HTML :

<ul class="container" style="width:800px;"> 
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li> 
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li> 
    <li><img src="http://www.lovehkfilm.com/panasia/aj6293/gu_gu_the_cat.jpg"></li> 
</ul> 

CSS :

img {max-width: 100%; } 
li { display: table-cell; } 

DEMO