Question

我需要建立一个与http://www.babingtonhouse.co.uk/house上看到的功能相同的网站。这些框必须始终保持相同的高度，图像应按比例缩放到框高内。我怎样才能做到这一点？不幸的是，我找不到js-code来了解他们是如何做到的。

我用css（img-class：width：100％）尝试过，但在某些尺寸上，ing的高度比文本框高。

感谢您的帮助。

最好的问候托马斯

Answer 1

也许是这样的

http://jsfiddle.net/2jrn208p/1/

<强> HTML：

<div id="wrap">
    <div class="image" id="img1"></div>
    <div class="image" id="img2"></div>
</div>

<强> CSS

#wrap {
    height:90vh
}
.image {

    height:50%;
    background-repeat: no-repeat;
    background-position: center center;
}
#img1 {
    background-image: url('http://i56.tinypic.com/2hr0twi.jpg');
}
#img2 {
    background-image: url('http://media.desura.com/images/members/1/420/419240/SERB_VILLAGE.jpg');
}

Img动态缩放成箱高

1 个答案: