如何在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

我的這種方法是使用該圖像作爲背景圖像。這將使您能夠對其進行居中並在調整大小時對其進行裁剪，同時仍然保持所需的300像素高度。

DEMO http://jsfiddle.net/NSS2T/4/

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

編輯

由於使用的是編程方式生成的圖像，則需要通過jQuery作爲並列的CSS實施例I上面已經給添加計算的造型。

DEMO 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'); 
});