CODEWITHSUNDEEP
cssimagefluid-layoutscaletransform
ndp
ndp

Reputation: 893

change fluid image aspect ration css

I'm trying to place 6 images one next to another with css, the whole thing should be able to scale pretty well in most displays (except for mobile for the moment) so I've made this: http://pelloponisos.telesto.gr/galleryTest/test/gallery.php# (apparently I'm trying to make yet another carousel)

most of my images have a bigger width than height so when I scaled them I just put width:x% in the li container and 100% for the image width.

but the sixth image is different and it causes quite a bit of trouble I tried setting the height too but you can only scale the images based on one of the two.

The only thing that worked so far was to put a static height in the ul and then scale in both width and height but then it's not a fluid grid.

is there any way to make all li elements have a fluid height and then scale all images based on that? or if not is there any way to make any image with different ratio scale to the one I specify in the css?

Upvotes: 0

Views: 118

Answers (1)

Sean
Sean

Reputation: 110

I stripped down your code a little bit, but this seems to get closer to the idea. The trick is to set the width in the container (.upper ul li) then for the images use: max-width:100%; height:auto. Also, the padding is now in %. 

            #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;
            }

Upvotes: 1

Related Questions