将图像放大到全屏，保持宽高比，然后居中. [英] Enlarging an image to full screen, maintain aspect ratio and then center.
问题描述
我正在使用jQuery，但老实说，我不是100％地确定这完全是jQuery问题.
该插件用于图库/幻灯片，但这可能无关紧要.我提到这是为了防止有人好奇.
在这里...我有一个图像，并决定其高度和宽度，这是需要重新设置为全屏宽度的宽度.我想保持宽高比，以便在进行宽度调整时，图像的高度变得大于屏幕的高度.没关系.这是我想要的.总覆盖率.但是这里有点混乱.
我进行了另一次计算，发现多余的高度(img高度-浏览器高度)为X.因此，将img的页边距设置为:-(X/2).换句话说，图像将以相等的位垂直居中，现在从顶部和底部被切除.我希望我有道理.
这在FireFox和IE中可以正常工作，但在Chrome中，我最终遇到了麻烦.如果我将margin-top:bit取出，则黑带消失，浏览器似乎将图像垂直居中放置.但这又搞砸了FF和IE.
我想知道我是否误解了定位，溢出，浏览器如何在全屏模式下解释溢出等更细微的方面.此外，我想提及一下，此滑块"具有响应性，所以我可以在样式表中执行固定的宽度和/或高度.我在提到的任何猴子业务中都使用.attr().
另一件事，有时我的插件在Chrome中可以正常工作，有时会出错.例如，我将使滑块处于暂停状态，并且它将在不单击开始的情况下开始播放.我应该找什么?这只是我的第二个插件，所以我还是绿色的，而且可能比我目前的技能水平更具野心:)
如果使用.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除以2并乘以负1(返回负值以使图像居中)垂直).
: 0:最后，如果if语句解析为false，则将返回此结果，从而将图像停靠在容器的顶部.
I'm using jQuery but I'm honestly not 100% certain this is entirely a jQuery issue.
The plugin is for a gallery/slider but this too probably doesn't matter. I mention it in case someone was curious.
Here goes...I have an image and decide that of the height and width, it's the width that needs to be reset to fullscreen width. I want to maintain the aspect ratio so in doing the width resize, the height of the image becomes greater than the height of the screen. That's fine. That's what I want. Total coverage. But here's where it gets a bit messy.
I do another calculation and figure out that the excess height (img height - broswer height) is X. So I set the img's margin-top: - (X / 2). In other words, the image will center vertically with equal bits now getting cut off the top and bottom. I hope I'm making sense.
This works fine in FireFox and IE but in Chrome I end up with a band across the bottom. If I take the margin-top: bit out, then the black band goes away and the browser seems to vertically center the image on its own. But then that screws up FF and IE.
I'm wondering if I'm misinterpreting some of the more subtle points of positioning, overflow, how the browser interprets overflow in a fullscreen, etc. Also, I want to mention, that this "slider" is responsive so I can do fixed width and/or height in the stylesheet. I've been using .attr() for any of the monkey biz I've mentioned.
One other thing, sometimes my plugin works fine in Chrome, sometimes it bugs out. For example, I'll have the slider on pause and it'll start playing without me clicking start. What should I look for? This is only my second plugin so I'm still green and probably more ambitious than my current skill level :)
If you use .attr() you will only be able to set/get attributes. If you want to alter the style attribute, you can either use .css() or .attr('style', '<some-style>').The former is preferred as this is what it's for, but the latter works, however it will overwrite any other inline-styles whereas .css() will allow you to edit only the styles you want without affecting the others.
Docs for:
.attr(): http://api.jquery.com/attr.css(): http://api.jquery.com/css
Here's what I came-up-with:
//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');
Here is a demo: http://jsfiddle.net/Zex4S/1/
Note that .on() is new in jQuery 1.7 and in this case is the same as .bind(): http://api.jquery.com/on
(imgHeight > viewport.height) ? Math.floor((imgHeight - viewport.height) / 2 * -1) : 0: This is an important piece of code, it's a ternary operation.
(imgHeight > viewport.height): This is the beginning of the if statement, checking to see if the imgHeight value is greater than the viewport.height value.
? Math.floor((imgHeight - viewport.height) / 2 * -1): If the statement resolves to true then this is what will be returned, the imgHeight minus the viewport.height divided by two and multiplied by negative one (to return a negative value to center the image vertically).
: 0: finally if the if statement resolves to false then this well be returned, which docks the image at the top of it's container.
这篇关于将图像放大到全屏，保持宽高比，然后居中.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
