html - CSSで画像を水平方向にのみ拡大/縮小するにはどうすればよいですか?

Question

このウェブサイトの写真のように、メイン画像を水平方向にのみ拡大/縮小するにはどうすればよいですか? ブラウザのサイズを変更すると、画像をスケーリングする代わりに、画像の側面が切り取られ始めます。仕組みは次のとおりです: http://castus.co.uk/

castus.co.uk Web サイトのメイン画像は、ブラウザーのサイズをどれだけ小さくしても同じ高さに保たれますが、画像の側面が縮小されます。

ブラウザのサイズを変更すると、画像全体が拡大縮小されるようにしか見えません。

現在、img クラスに次のコードを使用しています。

    img.mail {

    width: 100%;
    height: auto;

    }

Answer 1

それともこれのことですか？

    background-position: center;
    background-image: url('....');
    background-repeat: none;

    width: 100%;
    height: 100px;

あなたが投稿したようなスケールの代わりにカットします。

注：きれいに機能させるには、広い画像が必要です

Answer 2

中央の背景画像を使用し、含まれている要素を縮小して画像の側面を隠しています。

例えば

#feature {
   background: url("path/to/img") center 0px no-repeat;
   width: 100%;
   height: 50px; // Height of image
}

例: http://jsfiddle.net/xY9qT/1/

Answer 3

私が使う：

max-width: 100%;
height: auto;