축소 이미지 내용에 맞게 축소 이미지를 얻으려면 어떻게해야합니까?

Question

나는이 질문 (또는 이와 같은 질문)이 계속 반복해서 물어 왔음을 깨닫고, 나는 쓸데없이 그 모든 것을 읽은 것처럼 느낀다. 나는 이것에 익숙하지 않아 나와 함께 감당할 수있다. 그리고 나는이 좌절감을 통해 목록 요소의 본질을 잊어 버릴 수있다. 여기에 내 문제가 ...

다른 크기의 엄지 손가락이있는 축소판 갤러리가 있습니다. (페이지로드시 폴더에서 엄지 손가락을 동적으로로드하고 있습니다). 섬네일 갤러리는 ul을 사용하여 만들어집니다. 필자가 il의 속성을 인라인으로 설정하여 목록에서 돌아 가지 않고 다시 실행하면 li의 범위가 엄지 손가락에 맞게 확장되지 않습니다. li 디스플레이를 차단 (또는 디스플레이 제거)하도록 변경하면 내용에 맞게 확장됩니다. if display : inline-block을 사용하면 li 내용의 엄지 손가락이 li에 맞게 축소되지만 li은 여전히 ​​더 넓습니다. 이미지 ... arg!

크기를 지정하지 않고 내용에 맞게 il을 확장하도록하려면 어떻게해야합니까?

  __    __ 
< ----| |---- ----| |---- 
< ----|__|---- ----|__|---- 

: 나는 페이지를 볼 때 그래서 나는 다음과 같은 것을 볼 수

<div class="gallery"> 
<ul> 
    <li><a href="brown.png"><img src="/photos/brown.png" alt="" /></a></li> 
    <li><a href="blue.png"><img src="/photos/blue.png" alt="" /></a></li> 
    <li><a href="light-blue.png"><img src="./photos/light-blue.png" alt="" /></a></li> 
</ul> 
</div> 

을 : 그것은로드 후 여기

.gallery { 
width: 100%; 
cursor: default; 

overflow:hidden; 
} 
.gallery ul { 
list-style:none outside none; 
overflow:hidden; 
} 
.gallery li { 
background: #eee; 
border-color: #ddd #bbb #aaa #ccc; 
border-style: solid; 
border-width: 1px; 
color: inherit; 

margin: 3px; 
padding: 5px; 

display:inline; 
position: relative; 
vertical-align:top; 

overflow:hidden; 
} 

코드의 샘플입니다 : 여기

내 CSS의

가운데 상자는 img 요소를 나타내며 백그라운드에서 작은 점선 사각형은 pa입니다. 임대 li 요소. (내가 뉴비이기 때문에 나는 그림을 게시 할 수 없었다. 미안)

누군가는 어떤 생각을 가지고 있냐?

미리 감사드립니다.

Answer 1

데이빗 감사! - JS Fiddle에 넣은 코드를 살펴 봤지만 알아낼 수 없었습니다.하지만 디스플레이를 인라인 블록으로 변경했을 때 효과가있었습니다. 진심으로 나는 지난 수백만 번의 변경 사항 중 어느 시점에서 인라인 블록을 시도했다고 생각했습니다. - 오 잘 작동합니다 :) 답변에 대해 너무 감사드립니다 !!!