Home/ Questions/Q 4541582
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T15:15:37+00:00

I want to make the logo (in the top left corner) always keep its

  • 0

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…)!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0