이미지 크기를 창 크기에 비례하여 조정하십시오.

Question

jquery/css를 사용하여 상대적으로 화면 크기를 조정할 수있는 방법이 있습니까? 화면의 모든 크기에 맞는 이미지 갤러리를 의미합니다.

내가 1280x800이고 갤러리가 화면에 맞다고 해봅시다. 그러나 1024x768 인 경우 화면에 이미지를 맞추기를 원합니다.

나는 당신이 창 크기를 조정하면

그래서 난 그들에게 창 크기에 따라 축소 할 이미지가 7 이미지 컬럼 당이

<div class="imageWrapper"> 
<img src="1.jpg" id="1"> 
<img src="2.jpg" id="3"> 
</div> 

70 틸 이미지처럼 한 줄에 10 이미지 앉아있다

Answer 1

Google에서 살펴볼 수있는 코드 스 니펫이 있습니까? 문제 해결에 도움이 될 것입니다. 예를 들어

, 당신은 할 경우이 :

<div> 
    <img src="foo.jpg"> 
</div> 

솔루션이 될 수있는 일

div img { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 

좋아하지만 미리보기 이미지 CSS에서 배경 - 이미지가있는 경우,이 솔루션은이 같은 수 :

div.thumbnail { 
    background-size: 100% 100%; /*works on FF4+/IE9+/Opera 10/Safari 4.1+/Chrome 3+ */ 
} 

편집 : 행에 이미지를 많이 넣고 싶다면 다음과 같이 설정할 수 있습니다. 당신은 내가이 가능 확신이

.gallery { 
    width: 100%; 
    min-height: 100%; 
    height: auto; 
    zoom: 1; /*to clear the floats in IE*/ 
} 
.gallery:after { 
    content: "\0020"; /*an empty character*/ 
    display: block; 
    clear: both; 
} 
.gallery a { 
    float: left; 
    width: 23%; /*This ones assumes 4 columns (25% - 1% each side for margins) */ 
    height: 100px; /*set it to something that makes sense for your gallery*/ 
    margin: 10px 1%; /*space between each thumbnail*/ 
    overflow: hidden; 
    position: relative; 
} 
.gallery a img { 
    display: block; 
    width: 100%; 
    position: relative; 
}