0

サムネイルギャラリーを作成しています。サムネイルごとに、クリッパーdivを作成し、そのdiv内に画像を配置しています。サムネイルのサイズは画像ごとに異なりますが、クリッパーdivは150x150pxです。

<div class='clipper-div'>
    <img class='image1' src='img/img2.jpg'/>  
</div>

そのdivを完全に占有し、画像の残りの部分が正確に中央に配置されるようにクリップされるように、その画像を配置したいと思います。

これを行うために、画像の最小寸法（高さ/幅）を確認して、100％にします。そして、他の次元については、divの150pxよりも大きくなっています。差を計算し、それを2で割って、上/左属性をその値の負に設定して画像が中央に表示されるようにします。次に、overflow：hiddenをクリッパーdivに追加して、余分な部分が見えないようにします。

これを行うためのより良い方法があるかどうかを知りたいのですが、これらの値を計算する代わりに、CSSプロパティを設定して、すべての画像がそのdivの中央に配置され（垂直/水平）、残りの部分がクリップされるようにすることができます。

説明がわかりにくい場合は、例を示します。サムネイルのサイズが300x100pxだとします。つまり、高さは最小の属性なので、100％に設定しています。高さは150、幅は400pxになるので、オフセットを計算します。この場合、（400-150）/ 2=125pxです。次に、画像を-125pxに設定しました

.image1{
     position:absolute;
     left:-125px;
     height:100%;
}
4

1 に答える 1

2

これを試して：

.Image1 { 
    background: url(images/bg.jpg) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
于 2013-01-24T03:17:00.680 に答える