更改流体图像方面评估CSS

Question

我试图用CSS将6个图像放在另一个图像旁边，整个内容在大多数显示器中都应该能够很好地扩展（目前移动除外）所以我做了这个：http://pelloponisos.telesto.gr/gallerytest/test/gallery.php#（显然我正在尝试制作另一个轮播）

我的大多数图像的宽度都比高度大，因此当我缩放它们时，我只是放置宽度：LI容器中的x％，图像宽度为100％。

，但第六张图像是不同的，它会导致很多麻烦我也尝试设置高度，但您只能根据两者之一缩放图像。

到目前为止唯一起作用的是在UL上放置静态高度，然后宽度和高度缩放，但不是流体网格。

是否有任何方法可以使所有LI元素具有流体高度，然后根据此规定所有图像？或者如果不是有什么方法可以使任何比例比例不同的图像与我在CSS中指定的图像量表不同？

Answer 1

我稍微剥离了您的代码，但这似乎越来越接近这个想法。诀窍是将容器的宽度设置（.upper ul li）然后用于图像使用：最大宽度：100％;身高：自动。另外，填充物现在为％。

            #carousel{
            position:relative;
            }
            #wrapper{
            margin:0 auto;
            }
            #slides{
            width: 100%;
            }
            .upper ul li{
            width: 200px;
            max-width: 100%;
            list-style:none outside none;
            float:left;
            padding-bottom:5px;
            padding:2%; 
            }
            img.galleryThumbnail{
            max-width:100%;
            height:auto;
            }
            .info{
            display:none;
            }
            #buttons img{
            position:absolute;
            top:90px;
            }
            #buttons #prev img{
            position:absolute;
            left:29px;}
            #buttons #next img{
            position:absolute;
            right:21px;
            }