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

Question

我正在使用 background-image 将图像裁剪为 200 像素的宽度。我事先不知道图像宽度。我想要图像的中间部分。

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

这工作正常，但网络浏览器默认不打印背景图像。我可以使用 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/