如何模仿背景圖像，同時支持打印

我使用背景圖像裁剪圖像的寬度爲200px。我不知道圖像的寬度。我想要圖像的中間部分。如何模仿背景圖像，同時支持打印

.cropped-image { 
    width: 200px; 
    height: 270px; 

    /* centered, cropped image */ 
    background-position: center; 
    background-repeat: no-repeat; 
}

我的HTML模板看起來是這樣的：

<div class="cropped-image" style="background-image: url({{ product.image_thumb_url }})"> 
    </div>

下面是它在行動的例子：http://jsfiddle.net/hRSdY/

這工作得很好，但Web瀏覽器默認是不打印背景圖片。我可以使用list-style-image來模擬背景圖像，但我無法裁剪到圖像的中心：http://jsfiddle.net/KP7ng/1/。

是否有任何方式使用CSS水平裁剪圖像，在打印過程中保持圖像可見？

來源

2012-11-15 Wilfred Hughes

圖像是任意維度？ –

@ GabyakaG.Petrioli它們的寬度是任意的，是的。 –

Wilfred，那麼它不能只用CSS來完成..它需要一些JS來完成.. –

你不能做到這一點與CSS如果圖像是任意尺寸的..

您將需要使用JavaScript來重新定位他們一旦加載..

一個jQuery的實施將

$(window).load(function(){ 
    $('.cropped-image img').each(function(){ 
     var self = $(this); 
     self.css({ 
      marginLeft: (-this.width/2), 
      marginTop: (-this.height/2), 
      visibility: 'visible' /*set to visible once loaded and repositioned*/ 
     }) 
    }); 
});

與

<div class="cropped-image"> 
    <img src="{{ product.image_thumb_url }}"/> 
</div>

和CSS的HTML結構

.cropped-image { 
    width: 200px; 
    height: 270px; 
    position:relative; 
    overflow:hidden; 
} 
.cropped-image img{ 
    left:50%; 
    top:50%; 
    position:absolute; 
    visibility:hidden; /*set to hidden until the page is loaded to avoid moving images*/ 
}

演示在http://jsfiddle.net/gaby/3Yg7V/

來源

2012-11-15 19:57:18

如果您使用JavaScript庫。至少告訴那個人哪一個:)否則使用原生JavaScript而不是庫。 –

我寫「* a ** jquery **實現將*」 –

加粗它強調.. :) –

像這樣的事情？：

http://jsfiddle.net/WPF75/

HTML：

<div class="crop"> 
<img src="http://2.bp.blogspot.com/_Mzmuwpq3Fpw/SFQ4dKzbD3I/AAAAAAAAANE/ulNUQpbDKI4/s320/fusion-icon.png" /> 
</div>

CSS：

div.crop { 
    height: 80px; 
    border: 1px solid red; 
    overflow: hidden;  
} 

div.crop img { 
    margin-top: -20%; 
}

來源

2012-11-15 19:22:37

'margin-top：-20％'是相對於div的大小而不是圖像。這種作物，但不是圖像的中心。這是一個極端的例子：http://jsfiddle.net/WPF75/1/ –

正確。而最有可能的是它必須是一個固定值。這20％用於插圖。如果您不知道圖片的大小以確定中間是什麼，那麼您就會被上面提到的JavaScript解決方案所困擾。 –

如何模仿背景圖像，同時支持打印

回答

相關問題