Question

我正在处理标题上的自适应幻灯片。我无法将CSS属性background与cover一起使用。我应该在div中使用<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)
        })
    }

})

例如，父级的块为2500x400，图像为1900x1400。或者父母的区块是400x400。

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

谢谢。

Answer 1

我更喜欢将CSS规则用于响应式图像

＆＃13;

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

＆＃13;

尝试Playit W3C Schools

覆盖响应块内图像的最佳方法

1 个答案: