CODEWITHSUNDEEP
jquerycssresponsive-designwidth
cfocket
cfocket

Reputation: 109

Keep img ratio with jQuery or CSS

Over 910px, I have a fixed img that takes 100% of the window in height and has a width: auto;. On load, the image has always the good proportions, but when I scale down (from the bottom) it distorts itself.

The width stays the same and doesn't scale down.

The image is contained in a .picture div :

.picture {
float: left;
position: fixed;
height: 100%;
width: auto;
}

Example : enter image description here

Is there a way to force the image to keep it's original ratio, maybe using jQuery? The content on the right already changes its width in function of the image width.

Here's the template : http://bettercheckthekids.com/pirlo/index.html

Upvotes: 0

Views: 110

Answers (1)

java seeker
java seeker

Reputation: 1266

i would suggest you a alternative way to solve your problem. if you use bootstrap you can involve a div to make resizable image.

 <div class="img-responsive">
     <img src="test.jpg" width='xxx' height='yyy' alt='test'>
  </div>

Upvotes: 2

Related Questions