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

【问题标题】：Resize image thumbs relative to window size相对于窗口大小调整图像缩略图的大小
【发布时间】：2012-02-12 14:06:36
【问题描述】：

有什么方法可以使用 jquery/css 来调整我的画廊拇指相对于屏幕大小的大小。这意味着图片库适合所有尺寸的屏幕。

假设我有 1280x800 并且画廊适合屏幕。但是，如果我有 1024x768，我仍然想在该屏幕中调整图像。

我有像这样坐着的图片

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

直到 70 张图片每行 10 张图片每列 7 张图片

所以如果你调整窗口大小，我希望它们根据窗口大小缩小

【问题讨论】：

我相信这是可能的。请把你的代码草案放在这里。
你应该可以只用 CSS 和图像缩放来做到这一点。

标签： jquery css

【解决方案1】：

您有代码 sn-p 供我们查看吗？它将帮助我们解决您的问题。

例如，如果你有这个：

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

【讨论】：

我刚刚更新了答案，向您展示了如何设置快速画廊布局。