Question

我想让徽标（在左上角）始终保持其宽高比，但我也希望它能够保持在正确的位置，对于任何浏览器。这是我的代码：

<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是唯一的方式......）！

Answer 1

如果仅指定图像的宽度，则会自动调整高度以保持纵横比（反之亦然）。因此，请删除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而不是属性来定义。

Answer 2

只给它一个宽度或高度，它将保持其宽高比。

<img/>缩放到最接近的宽高比

2 个答案: