Question

我正试图用css将6张图片放在另一张图片旁边，整个事情应该能够在大多数显示器中很好地扩展（目前除了移动设备）所以我做了这个： http://pelloponisos.telesto.gr/galleryTest/test/gallery.php# （显然我正试图制作另一个旋转木马）

我的大多数图像的宽度都比高度大，所以当我缩放它时，我就放了 width：li容器中的x％和图像宽度的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;
            }

改变流体图像长宽比css

1 个答案: