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

我正在使用背景图像将图像裁剪到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>

下面是一个实际应用的例子：

这很好，但是默认情况下web浏览器不打印背景图像。我可以使用

列表样式图像

来模拟背景图像，但我不能裁剪到图像的中心：

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

类似的内容

html:

像这样的

html:

---

如果图像是任意尺寸的，则无法使用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进行演示

加载后，您需要使用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>

---

演示在

图像是任意尺寸的？@gabykag.Petrioli它们是任意宽度的，是的。Wilfred，那么它不能只用CSS来完成。。这需要一些JS来完成。图像是任意尺寸的？@gabykag.Petrioli它们是任意宽度的，是的。Wilfred，那么它不能只用CSS来完成。。如果使用javascript库，则需要执行一些JS。至少告诉他是哪一个：）否则就使用本机javascript而不是库谢谢：）错过了。jQuery确实很烂，你知道：）Mootools-ftw！如果您使用javascript库。至少告诉他是哪一个：）否则就使用本机javascript而不是库谢谢：）错过了。jQuery确实很烂，你知道：）Mootools-ftw<代码>页边距顶部：-20%与div的大小有关，而不是与图像有关。这会修剪，但不会修剪到图像的中心。这里有一个极端的例子：正确。很可能它必须是一个固定值。20%用于插图紫色。如果您不知道图像的大小来确定中间是什么，那么您就只能使用上面提到的javascript解决方案。

margintop:-20%

与div的大小有关，而不是与图像有关。这会修剪，但不会修剪到图像的中心。这里有一个极端的例子：正确。很可能它必须是一个固定值。20%用于插图紫色。如果您不知道图像的大小来确定中间是什么，那么您就只能使用上面提到的javascript解决方案。

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