[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计算宽度。如果您需要淡入淡出 - 使用宽度：100％并删除HTML上的图像大小。