我想让 Logo (在左上角)始终保持其纵横比，但我也希望它保持在正确的位置，任何浏览器。这是我的代码:
<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>
如果您使用此代码并调整窗口大小，您会看到 Logo 被严重拉伸(stretch)变形了。我怎样才能确保它保持纵横比？
PS:如果有人能告诉我如何为背景图像做同样的事情，那就太好了。 PS:尽可能少使用 jQuery(不过，如果 jQuery 是唯一的方法......)!
最佳答案
如果您只指定图像的宽度，高度将自动调整以保持纵横比(反之亦然)。因此，删除 CSS 高度声明或宽度声明，具体取决于决定大小的内容。
如果您想根据浏览器的宽高比更改哪个维度是决定性维度，那么您可以使用一些 JavaScript/jQuery 来检查。 EG，高瘦的 window 应该以宽度作为决定尺寸，而宽的短 window 应该使用高度。
$(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 定义，而不是属性。
关于javascript - <img/> 缩放到最接近的纵横比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5786237/