jquery - 响应式剪切和调整图像大小

Question

我正在尝试实现类似http://jsfiddle.net/Zex4S/1/这样的东西，所以当你调整窗口大小时，它的图像会保持它的纵横比，但同时，我不想要这个的高度要更改的图像，它必须保持不变，并在必要时放大。

我认为它涉及裁剪顶部和左边距，但我无法让它工作

像这样的东西$this.css('margin-left', ($window.width() - this.width) / 2);

任何帮助将不胜感激！

Answer 1

我假设您的意思是您希望图像保持其自然宽度和高度，但如果窗口宽度小于图像宽度，则在其容器内保持“居中”。

你可以使用这样的东西来做到这一点：

var $img = $('img'),
    iw, ww;

$img.load(function() {
    iw = this.width; // save the natural width
});

$img.prop('complete') && $img.trigger('load'); // make sure load() is triggered

$(window).resize(function () {
    ww = $(this).width();
    if ( iw > ww ) { // if window width is less than image width, adjust margins
        $img.css('marginLeft', (iw-ww)/-2);
    }
}).trigger('resize');

Answer 2

如果您不介意将 img 标签换成带有背景图像的 div，您可以使用 100% CSS。只需将图像 url 添加为内联样式和 bammo，成功！

如果您需要 dom 中的 img，您可以始终将其保存在 .image 容器中，将其调整为容器的全尺寸，但使其透明。只是一个想法。

jsfiddle：http: //jsfiddle.net/JTV66/

HTML：

<div class="image" style="background-image: url(http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg)"></div>

CSS：

body, html{
    width:100%;
    height:100%;
}

.image{
    width:100%;
    height:100%;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
}