Question

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

我能够做到以上但是我遇到的问题是：我使用的图像都具有可变的宽度/高度，因为每个图像都是从API（在本例中为Spotify API）。话虽如此，我必须使用一些Javascript来找到正确的宽度。这样做只是在我添加类landscape之前，所以实际上它将图像宽度除以调整大小以适应250px x 250px #container div之前使用那个班的css。

我想要它做的是在使用landscape类的属性调整图像宽度之后将其划分为。

HTML

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

CSS

#container {height: 250px; width: 250px; overflow: hidden; position: relative;}

.landscape {position: absolute; height: 100%; left: 50%;}

.portrait {width: 100%;}

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');
    }
});

Answer 1

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

$(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');
    }
});

http://jsfiddle.net/d3u9tc0g/

Answer 2

您需要在添加课程后重新计算，而不是使用$imgWidth中保存的值。

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

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

2 个答案: