1

background-image を使用して、画像を幅 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 ブラウザーはデフォルトでは背景画像を印刷しません。background-image をエミュレートするために使用できます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 に答える