Question

有没有什么办法可以使用jquery / css来调整我的画廊拇指相对屏幕大小。它意味着图像库适合屏幕到各种尺寸的屏幕。

假设我有1280x800，而且画廊适合屏幕。但如果我有1024x768，我仍然希望将图像放在该屏幕上。

我有像这样的图像

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

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

因此，如果您调整窗口大小，我希望它们根据窗口大小缩小

Answer 1

您是否有我们可以查看的代码段？它将帮助我们解决您的问题。

例如，如果你有这个：

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

相对于窗口大小调整图像大小

1 个答案: