我有一个固定大小为 500x500 的 div。在这个 div 里面我有一个可以是动态的图像标签。这意味着它可以具有正方形、矩形(宽度 > 高度)或垂直矩形(高度 > 宽度)的大小。问题是我不希望这张图片被压扁,我想保持图片的纵横比。所以说图像大小是 1000x250,那么我希望它被调整为 500x125,然后以这个 500x500 的框为中心。如果大小为 500x1000,那么我们希望将其调整为 250x500,然后以左右白色间距居中。
有没有一种简单的方法可以使用纯 css 来做到这一点,还是我需要 javascript 才能做到这一点?如何?
这是我现在拥有的结构:
<div class="product-large" style="position: relative; overflow: hidden;"><img src="/images/store_logos/9ae3d8f75c80d5a48bf59f975e8450c9e8b7a9d9.jpeg" alt=""><img src="/images/store_logos/9ae3d8f75c80d5a48bf59f975e8450c9e8b7a9d9.jpeg" class="zoomImg" style="position: absolute; top: -236.43249427917618px; left: -188.05491990846681px; opacity: 0; width: 1024px; height: 714px; border: none; max-width: none;"></div>