CODEWITHSUNDEEP
javascript
drnessie
drnessie

Reputation: 897

<img /> scale to closest fit aspect ratio

I want to make the logo (in the top left corner) always keep its aspect ratio, but I also want it to stay in the right place, for any browser. Here's my code:

<body>
<img src="/home/istom/Dropbox/bcs logo border.png" width="25%" height="25%" style="position:absolute;top:6%;left:9.7%;z-index:1" />
<div style="position:absolute;top:12.5%;left:12.5%;width:75%;height:75%;border-style:solid;border-color:#6699cc;border-width:3px;background-image:url('/home/istom/Downloads/BCHands.jpg');background-position:95% 50%;background-repeat:no-repeat;background-size:60% auto;">
    <div style="float:left;position:relative;top:25%;left:5%;">Hello</div>
</div>

If you use this code, and resize your window, you'll see the logo is stretched infuriatingly out of shape. How can I make sure it keeps it's aspect ratio?

PS: If anyone can tell me how to do the same for the background-image that would great. PS: As little jQuery as possible (still, if jQuery is the only way...)!

Upvotes: 1

Views: 1691

Answers (2)

BudgieInWA
BudgieInWA

Reputation: 2255

If you specify only the width of the image, the height will automatically be adjusted to keep the aspect ratio (and vica-versa). So remove the CSS height declarations, or the width declarations, depending on what should determine the size.

If you wanted to change which dimension is the deciding dimension based on the browsers aspect ratio, then you can use some JavaScript/jQuery to check. EG, tall skinny windows should have the width as the deciding dimension, and height should be used for wide short windows.

$(window).resize(function(){
    if ( $(window).width() / $(window).height() < idealWidthHeightRatio)
        $("#the_img").css({width: "auto", height: "25%"})
    else
        $("#the_img").css({width: "25%", height: "auto"})

})

I think I got the css syntax correct, and the width/height would have to be defined using css, not attributes.

Upvotes: 2

user578895
user578895

Reputation:

only give it a width or height and it will keep its aspect ratio.

Upvotes: 1

Related Questions