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

我正在使用jQuery，但是老实说，我不是100％地确定这完全是jQuery问题。该插件用于画廊/滑块，但这可能无关紧要。我提到这是为了防止有人好奇。来吧...我有一个图像，决定高度和宽度，这是需要重置为全屏宽度的宽度。我想保持宽高比，以便在进行宽度调整时，图像的高度变得大于屏幕的高度。没关系。这就是我想要的。总覆盖率。但是这里有点混乱。我进行了另一次计算，发现多余的高度（img高度-浏览器高度）为X。因此，将img的页边距设置为：-（X / 2）。换句话说，图像将以相等的位垂直居中，现在从顶部和底部被切除。我希望我有道理。这在FireFox和IE中可以正常工作，但在Chrome I中，底部会出现一条带。如果我将margin-top：bit取出，则黑带消失，浏览器似乎将图像垂直居中放置。但这又搞砸了FF和IE。我想知道我是否误解了定位，溢出，浏览器如何在全屏模式下解释溢出等更细微的方面。此外，我想提一下，此“滑块”具有响应能力，因此我可以修复样式表中的宽度和/或高度。我在提到的任何猴子业务中都使用.attr（）。另一件事，有时我的插件在Chrome中可以正常工作，有时会出错。例如，我将使滑块处于暂停状态，并且无需单击开始就可以开始播放。我应该找什么？这只是我的第二个插件，所以我还是绿色的，可能比我目前的技能水平还抱有更大的抱负:) 最佳答案 如果使用.attr()，则只能设置/获取属性。如果要更改style属性，可以使用.css()或.attr('style', '<some-style>')。前者是首选，因为这是它的用途，但后者有效，但是它将覆盖任何其他内联样式，而可让您仅编辑所需的样式，而不会影响其他样式。下列文件：.css()：http://api.jquery.com/attr.attr()：http://api.jquery.com/css这是我想到的：//cache the image we want to manipulatevar $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/请注意，.css()是jQuery 1.7中的新功能，在这种情况下，它与.on()相同：http://api.jquery.com/on.bind()：这是重要的代码，是三元运算。(imgHeight > viewport.height) ? Math.floor((imgHeight - viewport.height) / 2 * -1) : 0：这是if语句的开始，检查(imgHeight > viewport.height)值是否大于imgHeight值。viewport.height：如果该语句解析为? Math.floor((imgHeight - viewport.height) / 2 * -1)，则将返回此值，true减去imgHeight除以2再乘以负1（返回负值以使图像垂直居中）。viewport.height：最后，如果: 0语句解析为if，则会返回此结果，它将图像停靠在容器的顶部。关于jquery - 将图像放大到全屏，保持宽高比，然后居中。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9236625/