このサイトはどのように画像を切り抜いて垂直になるように整列させるのですか？

Question

私はwww.piccsy.comを見ていました。何かのために同様のレイアウトを作りたいと思っていました。そして、時々、サムネイルで写真が切り取られ、上下の位置合わせが完璧になることに気付きました。

これらの比率を計算する方法についてのアイデアはありますか？

Answer 1

ウェブサイトにはさまざまなサイズの写真があります。あなたは全体の画像の小さなクリップがこのようにしたい場合。 CSSクリッププロパティを使用して作成されます。これはCSS2.1の一部です。

<a href="http://angrybirdsgamer.com/wp- content/uploads/2011/07/com.rovio_.angrybirds_icon.png"> 

    <img height=100 width=150 src="http://angrybirdsgamer.com/wp-content/uploads/2011/07/com.rovio_.angrybirds_icon.png"> 
    </a> 

はそれが役に立てば幸い：

<div class="myclipwrapper"> 
    <div class="clip"> 
     <img src="http://angrybirdsgamer.com/wp- content/uploads/2011/07/com.rovio_.angrybirds_icon.png" /> 
    </div> 
</div> 


.clipwrapper{ 
     position:relative; 
     height:225px; 
    } 
    .clip{ 
     position:absolute; 
     clip:rect(50px 218px 155px 82px); 
    } 

は、しかし、あなたが、具体的サムネイルを表示したい場合、私はそれをこのように使用することをお勧め。