更改流体图像纵横比 css

Question

我正在尝试使用 css 将 6 张图片并排放置， 整个东西应该能够在大多数显示器中很好地扩展（目前除了移动设备） 所以我做了这个： http://pelloponisos.telesto.gr/galleryTest/test/gallery.php# （显然我正在尝试制作另一个轮播）

我的大多数图像的宽度都大于高度，所以当我缩放它们时，我只是放 width:x% 在 li 容器中，100% 为图像宽度。

但是第六张图不一样，比较麻烦 我也尝试设置高度，但您只能根据两者之一缩放图像。

到目前为止，唯一可行的方法是在 ul 中放置一个静态高度，然后在宽度和高度上进行缩放，但它不是一个流体网格。

有什么方法可以让所有的 li 元素都有一个流动的高度，然后以此为基础缩放所有的图像？或者如果不是 有什么方法可以制作与我在 css 中指定的比例不同的图像？

Answer 1

我稍微精简了您的代码，但这似乎更接近这个想法。诀窍是在容器中设置宽度（.upper ul li），然后为图像使用：max-width: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;
            }