1

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

这很好用，但默认情况下 Web 浏览器不打印背景图像。我可以list-style-image用来模拟背景图像，但我不能裁剪到 iamge 的中心：http: //jsfiddle.net/KP7ng/1/。

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

4

2 回答 2

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/

于 2012-11-15T19:57:18.150 回答
0

像这样的东西？：

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-15T19:22:37.050 回答