css - [CSS]div 中的动态图像大小和位置，百分比为百分比。 (显示屏尺寸)

Question

我是新来的，我在网上搜索了几天，但我不知道如何解决以下问题。

我的问题是，我想做一些类似于图片库的事情。但主要问题是动态大小和位置。

有很多人有不同的显示分辨率。我有一个上网本，所以我有 1366x768，其他的有例如 1024x600。所以我想制作一个在每个分辨率下看起来都不错的画廊。

我的第一个想法是创建一个主容器，它的宽度为 auto 并且在每个分辨率下都具有相同的大小。然后是另一个 div 以获得更好的结构，这是图像所在的位置。

HTML:

<div id='content'>
    <div class='top-news'>
        <div class='slideshow'>
                     //images
                </div>
        </div>
</div>

和 CSS:

#content{
height:auto;
width:auto;
background-color: #fff;
margin:20px 75px;
border:solid 1px #fff;
border-radius:10px;
-webkit-box-shadow: 0px 0px 10px 1px rgba(100, 100, 100, 0.75);
box-shadow: 0px 0px 10px 1px rgba(100, 100, 100, 0.75); 
}

#content .top-news{
height:auto;
width:auto;
border-bottom:solid 1px #ddd;
}

#content .top-news .slideshow{
height:auto;
width:auto;
margin: 10px auto;
padding: 10px 10px;
overflow:hidden;
}
#content .slideshow img{
float:left;
width:211px;
height:125px;
border:solid 1px #aaa;
margin: 5px 5px;
}

所以这在每个显示器上看起来都不错 :)

下一个想法是对齐图像，使其看起来非常好(div 和图像之间的空间相同)...但我不知道如何做到这一点，所以它是动态的。

如果我使用像素，它只会在像我一样的分辨率下看起来不错。连续图像的数量并不重要。最主要的是图像在每个显示器上应该按顺序排列并且间距相同。

我希望你能帮助我。

干杯，hookiex3

Answer 1

您需要什么画廊？滑动还是褪色？如果滑动使用 JQ 来计算宽度。如果您需要淡入淡出 - 使用 width:100% 并删除 HTML 上的图像大小。