CODEWITHSUNDEEP
cssresizeimage-scaling
Celia
Celia

Reputation: 7

Image is distorting when window is re-sized (CSS)

So I've been trying to create a simple page where the image takes up 100% of the height, with a small sidebar. I want the image to resize itself when I resize the window. When I resize the window vertically, the width stays the same, which is not what I want (I want it to retain it's aspect ratio whatever the window size). I really dislike this distortion, but am unsure of how to fix it. Any idea what I'm doing wrong?

.big-image {
    max-height: 100%;
    min-width: 20%;
    margin: auto;
    overflow: hidden;
}

Upvotes: 0

Views: 1522

Answers (3)

Mishel Tanvir Habib
Mishel Tanvir Habib

Reputation: 1142

set display: block or display: inline-block to your .big-image class, in order for the max-height and min-width property to work. These properties, along with height, width, min-height, max-width, padding-top, padding-bottom, margin-top and margin-bottom doesn't work on inline elements.

Upvotes: 1

user3260487
user3260487

Reputation: 75

max-width:100% and height:auto will work. When applying max-width:1000%; it will take the width of the container and height will be proportionately varied.

Upvotes: 0

Daniel Fraser
Daniel Fraser

Reputation: 31

You can set either the height or width of an image to auto and control the other property with a set size whether that be percentage or px. That auto should maintain the aspect ratio of the image while you get to control the size of the image with the other property.

Upvotes: 0

Related Questions