将图像放大到全屏，保持纵横比然后居中。

Question

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

该插件用于画廊/滑块，但这可能无关紧要。 我提到它以防有人好奇。

来吧...我有一个图像，决定高度和宽度，这是需要重置为全屏宽度的宽度。 我想保持宽高比，这样在调整宽度大小时，图像的高度变得大于屏幕的高度。 没关系。 这就是我想要的。 总覆盖面。 但这里有点凌乱。

我进行了另一次计算，发现多余的高度（img高度-浏览器高度）为X。因此，将img的页边距设置为：-（X / 2）。 换句话说，图像将以相等的位垂直居中，现在从顶部和底部被切除。 我希望我有意义。

这在FireFox和IE中可以正常工作，但在Chrome I中，底部会出现一条带。 如果我将margin-top：bit取出，则黑带消失，浏览器似乎将图像垂直居中放置。 但这又搞砸了FF和IE。

我想知道我是否误解了定位，溢出，浏览器如何在全屏模式下解释溢出等更细微的方面。此外，我想提一下，此“滑块”具有响应能力，因此我可以修复样式表中的宽度和/或高度。 我一直在使用.attr（）来处理我提到的任何一个猴子商业。

另外一件事，有时候我的插件在Chrome中工作得很好，有时会出错。 例如，我将暂停滑块，如果没有单击开始，它将开始播放。 我应该寻找什么？ 这只是我的第二个插件，所以我还是绿色的，可能比我目前的技能水平还抱有更大的抱负:)

Answer 1

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

Docs：

• .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) ? Math.floor((imgHeight - viewport.height) / 2 * -1) : 0 ：这是重要的一段代码，它是三元运算。

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

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

: 0 ：最后如果if语句解析为false那么返回这个，这会将图像停靠在它的容器顶部。