[CSS] div 中的动态图像大小和位置，以百分比表示。 （显示屏尺寸）

Question

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

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

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

我的第一个想法是创建一个主容器，它的宽度为自动，并且每个分辨率的大小都相同。然后是另一个 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 上的图像大小。