CSSでイメージの一部を表示する方法は？

Question

1400x350のバナーとして使用する画像があります。その高さの80％を表示したいと思います。私はイメージを拡大縮小するつもりはないので、その一部だけを表示する必要があります。車の写真を想像して、私はタイヤの上から上に表示したいと思います。

私が見つけたものはすべて、画像の拡大縮小やサイズ変更の方法を示していますが、それでも元の画像の100％を示しています。私は元の画像の一部を表示することを探しているだけです。画像エディタで手動で画像をトリミングすることはできますが、私はこれをCSSで行うことができるようにしたいと考えています。

私はこの時点でdivの背景としてこれを使用しています。

div.banner { 
    content: url('../Images/banner.jpg'); 
    background-color: #A5B7C7; 
}​ 

<div class="banner"></div> 

Answer 1

これは、background-position: center bottom;を設定することによって簡単に達成できます。あなたのコンテナがあなたの背景イメージよりも小さくなったら、それは一番下に一列に並んでいるので上に隠れてしまいます。

この例では背景画像の高さが400ピクセルであるが、容器の高さは唯一300ピクセルである：

.banner { 
 
    background: url('https://placehold.it/300x400'); 
 
    background-position: center bottom; 
 
    height: 300px; 
 
    width: 300px; 
 
}

<div class="banner"></div>

Answer 2

U Uはたい画像の部分を取得するために、バックグラウンド位置によって調整することができ。

Answer 3

あなたは絶対したり、画像と例ここでhttp://www.w3schools.com/cssref/pr_pos_clip.asp

を固定のいずれかの位置を維持するために必要なこのため、クリップのプロパティを使用することによって、これを達成することができます：http://jsfiddle.net/2U3CE/1/

img{ 
     position:absolute; 
     clip:rect(0,73px,73px,0); 
     }