调整相对于窗口大小的图像缩略图

有没有什么方法可以使用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

调整相对于窗口大小的图像缩略图

回答

相关问题