Question

我正在使用背景图像将图像裁剪为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来模拟背景图片，但我无法裁剪到iamge的中心：http://jsfiddle.net/KP7ng/1/。

有没有办法使用CSS水平裁剪图像，在打印过程中保持图像可见？

Answer 1

如果图像具有任意尺寸，则无法使用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*/
        })
    });
});

的HTML结构

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

和CSS

.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/

演示

Answer 2

这样的东西？：

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%;   
}

如何在支持打印的同时模拟背景图像

2 个答案: