jquery - 将图像放大至全屏，保持宽高比，然后居中。

Question

我正在使用 jQuery，但老实说我不能 100% 确定这完全是 jQuery 问题。

该插件适用于画廊/ slider ，但这也可能并不重要。我提到它以防有人好奇。

这里...我有一个图像并决定了高度和宽度，这是需要重置为全屏宽度的宽度。我想保持宽高比，因此在调整宽度大小时，图像的高度变得大于屏幕的高度。没关系。这就是我想要的。全面覆盖。但这就是有点困惑的地方。

我又计算了一下，多余的高度(img高度-浏览器高度)是X。所以我设置img的margin-top:-(X/2)。换句话说，图像将垂直居中，顶部和底部的位相等。我希望我说得有道理。

这在 FireFox 和 IE 中工作正常，但在 Chrome 中我最终在底部出现了一 strip 。如果我去掉 margin-top: 位，那么黑带就会消失，浏览器似乎会自行垂直居中图像。但这样就搞砸了 FF 和 IE。

我想知道我是否误解了定位、溢出、浏览器如何解释全屏溢出等一些更微妙的点。另外，我想提一下，这个“ slider ”是响应式的，所以我可以在样式表中固定宽度和/或高度。我一直在使用 .attr() 来处理我提到的任何猴子业务。

另一件事，有时我的插件在 Chrome 中运行良好，有时会出现错误。例如，我将 slider 暂停，无需单击开始即可开始播放。我应该寻找什么？这只是我的第二个插件，所以我仍然是新手，并且可能比我当前的技能水平更雄心勃勃:)

Answer 1

如果您使用.attr()您只能设置/获取属性。如果您想更改 style属性，您可以使用 .css()或.attr('style', '<some-style>') .前者是首选，因为这就是它的用途，但后者可以工作，但它会覆盖任何其他内联样式，而 .css()将允许您仅编辑您想要的样式，而不影响其他样式。

文档:

• .attr() : http://api.jquery.com/attr
• .css() : http://api.jquery.com/css

这是我想到的:

//cache the image we want to manipulate
var $img = $('img');

//bind an event handler to the `resize` event for the viewport
$(window).on('resize', function () {

    //get the width and height of the viewport and store it in an object,
    //also get the aspect ratio of the image and it's calculated height based on the viewport's width
    var viewport = {
            width   : $(this).width(),
            height : $(this).height()
        },
        ratio     = ($img.height() / $img.width()),
        imgHeight = Math.floor(viewport.width * ratio);

    //update the CSS of the image element
    $img.css({
        width     : viewport.width,
        height    : imgHeight,
        marginTop : (imgHeight > viewport.height) ? Math.floor((imgHeight - viewport.height) / 2 * -1) : 0
    });

//trigger a `resize` event to fire on the `window` object for page-load so the element is loaded as full-width
}).trigger('resize');

这是一个演示:http://jsfiddle.net/Zex4S/1/

请注意.on()是 jQuery 1.7 中的新功能，在本例中与 .bind() 相同。 : http://api.jquery.com/on

(imgHeight > viewport.height) ? Math.floor((imgHeight - viewport.height) / 2 * -1) : 0 :这是一段重要的代码，是一个三元运算。

(imgHeight > viewport.height) :这是 if 语句的开头，检查是否 imgHeight值大于 viewport.height值。

? Math.floor((imgHeight - viewport.height) / 2 * -1) :如果语句解析为 true那么这就是将返回的内容， imgHeight减去viewport.height除以二并乘以负一(返回负值以使图像垂直居中)。

: 0 :最后如果 if语句解析为 false然后我们会返回该图像，它将图像停靠在其容器的顶部。