Question

我正在尝试实现类似http://jsfiddle.net/Zex4S/1/之类的东西，所以当您调整窗口大小时，它会保持其宽高比，但与此同时，我不希望此图像的高度发生变化，它必须保持不变，并在必要时放大。

我认为它涉及裁剪上边距和左边距，但我无法正常工作

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

任何帮助将不胜感激！

Answer 1

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

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

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

如果您不介意为带有背景图片的div交换img标记，则可以执行此100％CSS。只需将图片网址添加为内联样式和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;
}

响应剪切和调整图像大小

2 个答案: