如何在zurb基础上保持图像对固定高度的响应

Question

我希望将图像的高度保持在300px并自动隐藏左右尺寸的图像，同时调整图像大小以使图像中心始终可见。 例

<div class="large-12 columns">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/Auckland_airport_international_terminal.jpg/1024px-Auckland_airport_international_terminal.jpg"/><p></p>
</div>

Answer 1

我的方法是将图像用作背景图像。 这将使您能够将其居中并在调整大小时裁剪，同时仍保持所需的300px高度。

演示http://jsfiddle.net/NSS2T/4/

div {
    height: 300px;
    max-width: 100%;
    background: url('myImage.jpg') center center;
}

编辑

当您使用以编程方式生成的图像时，您需要通过jQuery添加计算样式，与我上面给出的CSS示例相对应。

演示http://jsfiddle.net/NSS2T/3/

HTML

<div>
    <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/3/10/1394464252285/5a3508c4-7dd0-4bac-90ed-f13c11b53cef-460x276.jpeg" class="upload" />
</div>

CSS 
// this will offset the image by 50%

img {
    display: block;
    position: absolute;
    left: 50%;
}

jQuery 
// this will loop through all images with a class of .upload and then apply a calculated margin offest to center the image

var imgWidth;

$('img.upload').each(function() {
    imgWidth = $(this).width() / 2;
    $(this).css('margin-left', '-'+imgWidth+'px');
});