如何模仿背景图像，同时支持打印

我使用背景图像裁剪图像的宽度为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解决方案所困扰。 –

如何模仿背景图像，同时支持打印

回答

相关问题