CSS/JS 갤러리의 크기 조정/자르기

Question

다른 질문이 있습니다. 나는 PhP없이 HTML 킥 스타트를 사용하고있다. 순수한 CSS/js. 이미지가있는 갤러리가 있습니다. 모든 이미지는

<div class="gallery"> 
    <a href="image.jpg"><img src="image_small.jpg" width="160" height="160"></a> 
</div> 

과 같은 일반적인 코드를 가지고 있습니다. 질문은 - 엄지 손가락을 동적으로 자르기/크기 조정하여 표시하는 방법입니까? 참으로 내가 몇 분 동안 그 작은 만들 수있다 "Dropresize"와 같은 옵션이 아이디어는,/포토샵에서 각각의 크기를 조정 자르기가이

<div class="gallery"> 
    <a href="image.jpg"><img class="thumb" src="image.jpg"></a> 
</div> 

같은 것이 같은 이미지를 사용하지만 난 해달라고하는 것입니다 그러나 여전히 2 개의 다른 이미지보다 1 개의 이미지를 사용할 수 있고 (자동으로 크기를 변경 한 이미지를 사용할 수있을 때) 더 유용합니다.

사진 최대 900px 너비 (또는 높이, 또는 둘 다)에 대한 어떤 크기 수 있도록 엄지
1)의 짧은 변에 160 픽셀 (160x210 또는 300x160, 어떤 방향)
2)의 가장 긴 측면을 조정할 수 있어야 잘려야하거나 특정 여백 값이 있어야합니다.

옵션이 있습니까?

당신과 같이 CSS 클래스의 수를 만들 수

Answer 1

: 같은 폭으로 하나 개의 값을 설정

.thumb { 
    max-width: 900px; 
} 

.thumb160px { 
    width: 160px; 
    height: 210px; 
} 

.thumb300px { 
    width: 300px; 
    height: 160px; 
} 

OR을, 그래서 같은 :

.thumb160px { 
    width: 160px; 
    height: auto; 
} 

.thumb300px { 
    max-width: 300px; 
    height: auto; 
} 

그리고이를 적용하여 HTML 요소는 다음과 같습니다.

<div class="gallery"> 
    <a href="image.jpg"><img class="thumb300px" src="image.jpg"></a> 
</div>