0

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

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

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

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

有没有办法让所有 li 元素都具有流动的高度，然后根据它缩放所有图像？或者如果没有，有什么方法可以制作与我在css中指定的比例不同的图像？

4

1 回答 1

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;
            }
于 2012-11-07T19:55:33.100 回答