<img />規模最接近適合寬高比

我想使標誌（在左上角）始終保持其高寬比，但我也希望它留在正確的地方，任何瀏覽器。這裏是我的代碼：<img />規模最接近適合寬高比

<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>

如果您使用此代碼，並且調整你的窗口，你會看到標誌是僵硬變形了。我如何確保它保持高寬比？ PS：如果任何人都可以告訴我如何爲背景圖像做同樣的事情，那就太棒了。 PS：儘可能少的jQuery（如果jQuery是唯一的方法......）！

來源

2011-04-26 drnessie

如果僅指定圖像的寬度，則會自動調整高度以保持高寬比（反之亦然）。因此，取決於應確定尺寸的CSS高度聲明或寬度聲明。

如果您想要根據瀏覽器縱橫比更改哪個維度是決定維度，那麼您可以使用一些JavaScript/jQuery來檢查。 EG，高瘦的窗戶應該有寬度作爲決定尺寸，高度應該用於寬大的短窗戶。

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

})

我覺得我得到的CSS語法正確，和寬度/高度將不得不使用CSS，沒有屬性進行定義。

來源

2011-04-26 05:19:14 BudgieInWA

只給它一個寬度或高度，它會保持其長寬比。

來源

2011-04-26 05:19:21

<img />規模最接近適合寬高比

回答

相關問題