Question

我正在努力将图像放在对象的正中间，使其看起来像background-size: cover;。为此，我将宽度或高度（其中较小的一部分）设置为100%，将另一个设置为auto。然后我将顶部和右侧设置为50%。最后，我尝试将边距（右边和上边）设置为高度和宽度的一半。

这是我的代码：

$.fn.extend({
    middleify: function(){
        var i = $(this);
        var f = i.parent();
        var wh = i.height() == i.width() ? f.width() < f.height() : i.width() > i.height();
        var hw = i.height() == i.width() ? f.height() < f.width() : i.height() > i.width();
        return i.css({position: "relative", "z-index": 2, width: hw ? "100%" : "auto", height: wh ? "100%" : "auto", top: "50%", right: "50%", "margin-right": 0 - (i.width()) / 2, "margin-top": 0 - (i.width() / 2)});
    }
});

http://jsfiddle.net/beb8o2g6/2/

谢谢！

Answer 1

你可以只使用CSS ...

figure {
    position: relative;
    overflow: hidden;
    height: 100px;
    width: 200px;
    border: 1px solid black;
}

figure img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
}

<div class="left">
    <h1>The attempt</h1>
    <figure>
        <img src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/t31.0-8/1601993_484655221639466_890925492_o.jpg" />
    </figure>
    
    <figure>
        <img src="https://scontent-fra.xx.fbcdn.net/hphotos-ash2/v/t1.0-9/580303_450139941757661_1330443402_n.jpg?oh=9ae59fa1b0e51a356b2ca50b0c160354&oe=55DDE28F" />
    </figure>
    
    <figure>
        <img src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/1618538_487714631333525_1011288966_n.jpg?oh=2e48acfd68c08d2ea27fa3e7ba8e9462&oe=55B2A1C5&__gda__=1441110764_e04ce223b16035ae8c496e00f8845212" />
    </figure>
</div>

Answer 2

你错过了很多东西。

<强>第一

您的$(this);包含一系列元素，因为您的选择器为img

$("img").middleify();

然而，您存储的值如下：

    var i = $(this);
    var f = i.parent();

<强>第二

var wh = i.height() == i.width() ? f.width() < f.height() : i.width() > i.height();
var hw = i.height() == i.width() ? f.height() < f.width() : i.height() > i.width();

你不需要有这种条件，这确实让我很困惑。如果只设置width:100%然后设置height: auto，那么如果您的容器的高度width大于它的高度。

<强>第三

return i.css({position: "relative", "z-index": 2, width: hw ? "100%" : "auto", height: wh ? "100%" : "auto", top: "50%", right: "50%", "margin-right": 0 - (i.width()) / 2, "margin-top": 0 - (i.width() / 2)});

您正在计算尚未设置这些值的元素的width和height。它更有可能获得默认值。

要解决此问题，您必须先将width和height设置为单独计算

"margin-right": 0 - (i.width()) / 2, "margin-top": 0 - (i.width() / 2)});

将它们放在一起

$.fn.extend({
  middleify: function(){
    var i = $(this);
    $.each(i, function(index, value) {
       var elm = $(value);
       var f = elm.parent();  
       elm.css({position: "relative", "z-index": 2, width: "100%", height:"auto", top: "50%", left: "50%"});

       elm.css({"margin-left": 0 - (elm.width()) / 2, "margin-top": 0 - (elm.height() / 2)}); 
    });
  }
});
$("img").middleify();

Fiddle

<强>更新

由于设置较宽的图片width 100%会导致问题，让我们在background:cover上使用此逻辑

$.fn.extend({
  middleify: function(){
    var i = $(this);
    $.each(i, function(index, value) {
       var elm = $(value);
       var f = elm.parent();  

        var imgWidth = elm.width();
        var imgHeight = elm.height();

        var containerWidth = f.width();
        var containerHeight = f.height();

        var imgRatio = (imgHeight / imgWidth);
        var containerRatio = (containerHeight / containerWidth);

        if (containerRatio > imgRatio) {
          var finalHeight = containerHeight;
          var finalWidth = (containerHeight / imgRatio);
        } 
        else {
          var finalWidth = containerWidth;
          var finalHeight = (containerWidth * imgRatio);
        }

       elm.css({position: "relative", "z-index": 2, width: finalWidth, height: finalHeight, top: "50%", left: "50%"});

       elm.css({"margin-left": 0 - (elm.width()) / 2, "margin-top": 0 - (elm.height() / 2)}); 
    });
  }
});
$("img").middleify();

Fiddle

jQuery的宽度和高度返回旧值

2 个答案: