Question

64

Scaling Images Proportionally in CSS with Max-width

rated 0 times [ 70] [ 6] / answers: 1 / hits: 90597 / 15 Years ago, sat, january 16, 2010, 12:00:00

Right now, I'm using max-width to scale images to fit. However, they don't scale proportionally. Is there a way to cause this to happen? I'm open to Javascript/jQuery.

If possible, is there a way to do this without knowing the original dimensions of the image (maybe determine this using Javascript/jQuery)?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tylerdamiena

Add To Favorites

Follow

Total Points: 139

Total Questions: 90

Total Answers: 118

Location: Liechtenstein

Member since Wed, Dec 8, 2021

3 Years ago

tylerdamiena questions

1 How to access sveltekit session in endpoint?

Tue, May 3, 22, 00:00, 2 Years ago

1 React.js, Each child in a list should have a unique key prop. how to fix if key is already given

Mon, Mar 7, 22, 00:00, 2 Years ago

1 Can`t resolve image.png in styles.css

Fri, Sep 17, 21, 00:00, 3 Years ago

1 Warning: validateDOMNesting(...): < body> cannot appear as a child of < div> in React.js

Wed, May 26, 21, 00:00, 3 Years ago

1 Using readonly on a reactive object

Tue, May 26, 20, 00:00, 4 Years ago

View All

answered 15 Years ago bradford · Accepted Answer

You need to specify the original width and height:

<img src=/whatever width=100 height=200 alt=Whatever />

And then use something like this in the CSS:

#content img { max-width: 100%; height: auto }

You could try this with jQuery if you don't have the width and height up front, but your mileage may vary:

$(function(){

    $('#content img').load(function(){

       var $img = $(this);

       $img.attr('width', $img.width()).attr('height', $img.height());

    });

});

Obviously replace #content with whatever selector you want to scope the functionality to.