Enlarging an image to full screen, maintain aspect ratio and then center.

问题

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 :)

回答1:

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.

来源：https://stackoverflow.com/questions/9236625/enlarging-an-image-to-full-screen-maintain-aspect-ratio-and-then-center

标签

jquery

css

jquery-plugins