查找图像'；通过Javascript添加CSS类后的宽度

我有一个脚本设置，可以检测图像是纵向还是横向。在这种情况下，图像是横向的。我想做的是使用绝对定位裁剪图像并将其居中，将高度设置为100%，并根据图像宽度的一半为其留出负边距

我能够做到以上几点，但我遇到的问题是：我使用的图像都具有可变的宽度/高度，因为它们都是从API（在本例中是Spotify API）调用的。也就是说，我必须使用一些Javascript来找到它们的正确宽度。它就是这样做的，但只是在我添加类

横向

之前，所以实际上它在被调整大小以适应250px 250px

#容器

div之前使用该类中的css分割图像宽度

我想让它做的是在使用

横向

类中的属性调整图像大小后，在之后分割图像的宽度

HTML

<div id="container">
  <img src="https://i.scdn.co/image/9c4880556288e2f4d098a104f5125e477611be32" >
</div>

JS

$(function() {
    var $img       = $('img'),
        $imgHeight = $img.height(),
        $imgWidth  = $img.width();  

    if ($imgWidth > $imgHeight) {
        $img
            .addClass('landscape')
            .css({
                marginLeft: '-' + $imgWidth / 2 + 'px',
            });
    } else {
        $img.addClass('portrait');
    }
});

---

添加类后，您需要重新计算它，而不是使用保存在

$imgWidth

中的值

$img
            .addClass('landscape')
            .css({
                marginLeft: '-' + $img.width() / 2 + 'px',
            });

---

应用类后，应重新绘制宽度。在您的示例中，您使用的是实际应用该类之前的缓存宽度。工作代码：

$(function() {
    var $img       = $('img'),
        $imgHeight = $img.height(),
        $imgWidth  = $img.width();  

    if ($imgWidth > $imgHeight) {
        $img
            .addClass('landscape')
            .css({
                marginLeft: '-' + $img.width() / 2 + 'px',
            })
    } else {
        $img.addClass('portrait');
    }
});

---

可能的重复您是否在希望运行此脚本的每页上使用多个

元素？如果是这样的话，您将需要一个

每个
函数。@Bram Vanroy我每页使用一个图像作为化身，但很可能通过索引页使用更多图像。谢谢你的提醒，谢谢你指出这一点。我不敢相信我忽略了我使用缓存值的事实。