CODEWITHSUNDEEP
htmlcss
Troy Cost
Troy Cost

Reputation: 67

How can I get div container to resize vertically the same as image?

I have been trying this since last night but the code seems to get worse the more I try. I originally wanted to try and build a responsive image slider, but for some reason decided to use a UL to do so. It probably isn't needed but my problem is the same. As I resize the browser window to make it narrower, the image resizes vertically, but the div container does not. I have tried percentages, pixels, vh values, max-heights etc but nothing works to make the container resize in propotion to the image inside. The container is named .slide I have also made a JSFiddle

.slider
{
    width : 100% ;
    height : 100% ;
    position : relative ;
    padding : 0 ;
    margin : 0 ;
    background : green

}

.slide
{
    background-color : #FAFAFA ;
    width : 30% ;
    margin : auto ;
    height : 50% ;
    min-height : 330px ;
    position : relative ;
    top : 30% ;
    right : 0 ;
    left : 0 ;
    bottom : 0
}

.slide ul
{
    list-style : none ;
}

.slide ul li
{
    position : absolute ;
    left : 18% ;
    right : 18% ;
    top : 16%   
}

ul li img.photos
{
    width : 100% 
}

Upvotes: 0

Views: 37

Answers (1)

Maihan Nijat
Maihan Nijat

Reputation: 9344

It is because that in the following code you have set min-height: 330px which does not allow the container to resize vertically. Also decrease the height: 50%; as I see you do not need 50% height.

I also suggest to use min-height and min-width for image.

.slide
{
    background-color : #FAFAFA ;
    width : 30% ;
    margin : auto ;
    height : 50% ;
    min-height : 330px ;
    position : relative ;
    top : 30% ;
    right : 0 ;
    left : 0 ;
    bottom : 0
}

Fiddle

The second possibility is that you get rid of extra div and use border and padding for the image to have white background in the behind.

Upvotes: 1

Related Questions