画像を使用していて、アスペクト比の問題に遭遇しました。

<img src="big_image.jpg" width="900" height="600" alt="" />

あなたが見ることができるとして、height及びwidth既に指定されています。画像のCSSルールを追加しました：

img {
  max-width:500px;
}

しかし、のためにbig_image.jpg、私が受け取るwidth=500とheight=600。縦横比を維持したまま画像のサイズを変更する方法

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

これは、指定された領域に対して画像が大きすぎる場合、画像を縮小します（欠点として、画像は拡大されません）。

私はこの問題にかなり苦労し、結局この簡単な解決策にたどり着きました：

object-fit: cover;
width: 100%;
height: 250px;

必要に応じて幅と高さを調整できます。object-fitプロパティがトリミングを行います。

乾杯。

以下のソリューションでは、親ボックスの幅に応じて、画像の拡大および縮小が可能です。

すべての画像には、デモ目的でのみ、固定幅の親コンテナがあります。本番環境では、これは親ボックスの幅になります。

ベストプラクティス（2018）：

このソリューションは、利用可能な最大の幅で画像をレンダリングし、高さをその幅のパーセンテージとして調整するようにブラウザーに指示します。

.parent {
  width: 100px;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<div class="parent">
  <img width="400" height="400" src="https://placehold.it/400x400">
</div>

より洗練されたソリューション：

より洗練されたソリューションを使用すると、サイズに関係なく画像をトリミングし、トリミングを補うために背景色を追加できます。

.parent {
  width: 100px;
}

.container {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
  padding: 34.37% 0 0 0; /* 34.37% = 100 / (w / h) = 100 / (640 / 220) */
}

.container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<p>This image is originally 640x220, but should get resized by the CSS:</p>
<div class="parent">
  <div class="container">
    <img width="640" height="220" src="https://placehold.it/640x220">
  </div>
</div>

パディングを指定する行については、画像のアスペクト比を計算する必要があります。次に例を示します。

640px (w) = 100%
220px (h) = ?

640/220 = 2.909
100/2.909 = 34.37%

したがって、上部パディング= 34.37％です。

background-sizeプロパティはie> = 9のみですが、それで問題がなければ、divとwith background-imagesetを使用できますbackground-size: contain。

div.image{
    background-image: url("your/url/here");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

これで、divサイズを任意のサイズに設定でき、画像の縦横比が維持されるだけでなく、div内で垂直方向と水平方向の両方に集中化されます。divにはタグ自体にwidth / height属性がないため、CSSにサイズを設定することを忘れないでください。

このアプローチはsetecsの回答とは異なります。これを使用すると、画像領域は一定であり、ユーザーが定義します（divサイズと画像のアスペクト比に応じて、水平または垂直に空のスペースを残します）。一方、setecsの回答は、正確にスケーリングされた画像のサイズ（空白なし）。

編集：MDN background-sizeドキュメントによれば、独自のフィルター宣言を使用してIE8のbackground-sizeプロパティをシミュレートできます。

Internet Explorer 8はbackground-sizeプロパティをサポートしていませんが、非標準の-ms-filter関数を使用してその機能の一部をエミュレートすることが可能です。

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";

ここでのいくつかの回答と非常に似ていますが、私の場合、画像が高かったり、大きかったりすることがあります。

このスタイルは魅力的なように機能し、すべての画像がすべての使用可能なスペースを使用し、比率ではなくカットを確実に使用できるようにしました。

.img {
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
   width: auto;
   height: auto;
}

「高さ」プロパティを削除します。

<img src="big_image.jpg" width="900" alt=""/>

両方を指定することにより、画像のアスペクト比を変更します。設定するだけでサイズは変更されますが、アスペクト比は保持されます。

オプションで、オーバーサイズを制限するには：

<img src="big_image.jpg" width="900" alt="" style="max-width:500px; height:auto; max-height:600px;"/>

これをCSSに追加するだけで、元の比率を維持しながら自動的に拡大縮小します。

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

そこで画像のアスペクト比を維持する標準的な方法がなくwidth、heightそしてmax-width一緒に指定されました。

したがって、画像の読み込み中にページの「ジャンプ」を指定widthしheightて回避するかmax-width、画像のサイズを指定せずに使用する必要があります。

width（なしでheight）だけを指定することは、通常、あまり意味がありませんが、スタイルシートにheightなどのルールを追加することで、HTML属性をオーバーライドすることができIMG {height: auto; }ます。

関連するFirefox バグ392261も参照してください。

これが解決策です：

img {
   width: 100%;
   height: auto;
   object-fit: cover;
}

これにより、画像が常に親全体を覆い（縮小および拡大）、同じアスペクト比が維持されます。

画像コンテナタグのCSSクラスを次のように設定しますimage-class。

<div class="image-full"></div>

これをCSSスタイルシートに追加します。

.image-full {
    background: url(...some image...) no-repeat;
    background-size: cover;
    background-position: center center;
}

画像に特定のアスペクト比を強制しながら応答性の高い画像を維持するには、次のようにします。

HTML：

<div class="ratio2-1">
   <img src="../image.png" alt="image">
</div>

そしてSCSS：

.ratio2-1 {
  overflow: hidden;
  position: relative;

  &:before {
    content: '';
    display: block;
    padding-top: 50%; // ratio 2:1
  }

  img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

これは、作成者がアップロードする画像のサイズに関係なく、特定のアスペクト比を適用するために使用できます。

http://codepen.io/Kseso/pen/bfdhgの @Ksesoに感謝し ます。他の比率と実際の例については、このURLを確認してください。

正確なサイズに画像を収めるために、コードを書きすぎる必要はありません。とても簡単です

img{
    width: 200px;
    height: auto;
    object-fit: contain; /* Fit logo in the image size */
        -o-object-fit: contain; /* Fit logo fro opera browser */
    object-position: top; /* Set logo position */
        -o-object-position: top; /* Logo position for opera browser */
    }

<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png" alt="Logo">

https://jsfiddle.net/sot2qgj6/3/

ここでは、とのイメージを置きたい場合は答えはある幅の固定割合が、幅のピクセルを固定されていません。

これは、さまざまなサイズの画面を処理するときに役立ちます。

トリックは

1. padding-top幅から高さを設定するために使用します。
2. position: absoluteパディングスペースに画像を配置するために使用します。
3. を使用max-height and max-widthして、画像が親要素を超えないようにします。
4. display:block and margin: auto画像の中央揃えに使用します。

フィドル内のトリックのほとんどについてもコメントしました。

これを実現する他の方法もいくつか見つけました。HTMLには実際の画像はありません。そのため、HTMLに「img」要素が必要な場合は、個人的にトップの回答を取得します。

背景 http://jsfiddle.net/4660s79h/2/を使用した簡単なcss

上部に単語を含む背景画像 http://jsfiddle.net/4660s79h/1/

絶対位置を使用する概念はここからです http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

あなたはこれを使うことができます：

img { 
    width: 500px; 
    height: 600px; 
    object-fit: contain; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

次のようにdivを作成できます。

<div class="image" style="background-image:url('/to/your/image')"></div>

そして、このCSSを使用してスタイルを設定します：

height: 100%;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: contain; // this can also be cover

レスポンシブアプローチの場合、次のようにビューポートの単位と最小/最大属性を使用することをお勧めします。

img{
  display: block;
  width: 12vw;
  height:12vw;
  max-width:100%;
  min-width:100px;
  min-height:100px;
  object-fit:contain;
}

これは、指定された領域に対して画像が大きすぎる場合、画像を縮小します（欠点として、画像は拡大されません）。

自動モードでの「縮小して合わせる」には、setecによる解決策が適しています。ただし、「自動」モードに適合するように最適に拡張するには、まず受信した画像を一時IDに配置する必要があります。高さまたは幅を拡大できるかどうかを確認します（アスペクト比とアスペクト比によって異なります）。あなたのディスプレイブロック）、

$(".temp_image").attr("src","str.jpg" ).load(function() { 
    // callback to get actual size of received image 

    // define to expand image in Height 
    if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) {
        $(".image").css('height', max_height_of_box);
        $(".image").css('width',' auto');
    } else { 
        // define to expand image in Width
        $(".image").css('width' ,max_width_of_box);
        $(".image").css('height','auto');
    }
    //Finally put the image to Completely Fill the display area while maintaining aspect ratio.
    $(".image").attr("src","str.jpg");
});

このアプローチは、受信した画像が表示ボックスよりも小さい場合に役立ちます。サイズと帯域幅を節約するために、Biggerディスプレイボックスを満たすには、拡張バージョンではなく、元の小さなサイズでサーバーに保存する必要があります。

垂直方向の配置に疑似要素を使用するのはどうですか？この少ないコードはカルーセル用ですが、すべての固定サイズのコンテナーで機能すると思います。アスペクト比を維持し、@ gray-darkのバーを上/下または左/書き込みに挿入して、最短の寸法にします。その間、画像はtext-alignによって水平方向に中央に配置され、擬似要素によって垂直方向に中央に配置されます。

    > li {
      float: left;
      overflow: hidden;
      background-color: @gray-dark;
      text-align: center;

      > a img,
      > img {
        display: inline-block;
        max-height: 100%;
        max-width: 100%;
        width: auto;
        height: auto;
        margin: auto;
        text-align: center;
      }

      // Add pseudo element for vertical alignment of inline (img)
      &:before {
        content: "";
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }

全画面表示：

img[data-attribute] {height: 100vh;}

ビューポートの高さが画像よりも大きい場合、画像はその差に応じて自然に劣化することに注意してください。

最後に、これは簡単でシンプルな最良の解決策だと思います：

img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}