javascript - 在响应 block 内覆盖图像的最佳方式

Question

我正在处理页眉上的响应式幻灯片。我无法使用 CSS 属性 background与 cover .我应该使用 <img>内部分区。

<div class="parent">
  <img src="slide.jpg" alt="">
</div>

我试过这样的:

var imageContainer = $('.header');

var headerHeight = $('header').outerHeight();
var headerWidth = $('header').outerWidth();
var imgHeight = 498;
var imgWidth = 1900;
imageContainer.find('img').each(function() {
    var ratio = headerWidth / imgWidth;
    var newWidth = imgWidth * ratio;
    var newHeight = imgHeight * ratio;

    if (newHeight < headerHeight) {
        ratio = newHeight / imgHeight;
        $(this).css({
            'height'      : headerHeight,
            'margin-left': -(imgWidth * ratio / 2)
        }) 
    } else {
        $(this).css({
            'width'      : newWidth,
            'margin-left': -(newWidth/2)
        })
    }

})

例如， parent 的 block 是 2500x400，图像是 1900x1400。或者 parent 的 block 是 400x400。

我想找到 block 内响应图像的最佳解决方案。

谢谢。

Answer 1

我更喜欢对响应式图像使用 CSS 规则

.parent {
background-image: url(slide.jpg);
background-repeat: no-repeat;
background-size: auto;
}

尝试 Playit W3C Schools