調整相對於窗口大小的圖像縮略圖

有沒有什麼方法可以使用jquery/css來調整我的圖片縮略圖相對於屏幕的大小。這意味着圖像庫適合屏幕到所有大小的屏幕。調整相對於窗口大小的圖像縮略圖

可以說我有1280x800和畫廊適合在屏幕上。但是，如果我有1024x768我仍然想要適合在該屏幕上的圖像。

我有圖片坐在這樣

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

截至70圖像每行 10圖像每列 7圖片

所以如果你調整窗口的大小，我希望他們根據窗口大小縮小

來源

2012-02-09 Dips

我相信這是可能的。請將您的草稿代碼放在這裏。 – 2012-02-09 23:31:52

你應該可以用CSS和圖像縮放來做到這一點。 – Jason 2012-02-09 23:34:41

你有沒有我們可以看看的代碼片段？它會幫助我們解決您的問題。

舉例來說，如果你有這樣的：

<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+ */ 
}

編輯：如果你想有一堆圖像的行，你可以設置它們一個是個網格，讓你擁有HTML這樣

<div class="gallery"> 
    <a href="#"><img src="foo.jpg"></a> 
    <a href="#"><img src="foo.jpg"></a> 
    <a href="#"><img src="foo.jpg"></a> 
    <a href="#"><img src="foo.jpg"></a> 
    .... 
</div>

和CSS這樣

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

來源

2012-02-09 23:59:24 JuanOjeda

我剛剛更新了答案，向您展示瞭如何設置快速圖庫佈局。 – JuanOjeda 2012-02-12 06:07:01

調整相對於窗口大小的圖像縮略圖

回答

相關問題