web-dev-qa-db-ja.com

CSSによる画像のサイズ変更と縦横比の維持

私は画像を扱っています、そして私はアスペクト比の問題に出くわしました。

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

ご覧のとおり、heightとwidthはすでに指定されています。画像にCSSルールを追加しました。

img {
  max-width:500px;
}

しかしbig_image.jpgには、width=500とheight=600を受け取ります。縦横比を保ちながら、画像のサイズを変更する方法を教えてください。

cssimageaspect-ratio
449
moonvader
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">

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

645
setec

親ボックスの幅に応じて、以下の解決策では画像の拡大/縮小が可能になります.

すべての画像は固定幅 の親コンテナを持ち、デモンストレーション目的でのみ使用されます 。プロダクションでは、これは親ボックスの幅になります。

ベストプラクティス（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％です。

195
Aternus

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

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

あなたはあなたのニーズに合うように幅と高さを調整することができ、そしてobject-fitプロパティはあなたのためにトリミングをするでしょう。

乾杯。

169
Théo T. Carranza

Background-sizeプロパティは、> 9のみですが、それでも問題ない場合は、background-imageを付けてdivを使用し、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 answerとは異なります。これを使用すると、画像領域は一定になり、ユーザが定義します（divサイズと画像の縦横比に応じて水平または垂直に空のスペースを残す）。拡大縮小された画像のサイズ（空白を除く）。

編集： 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')";
60
Hoffmann

ここでいくつかの答えに非常に似ていますが、私の場合私は時々より高く、時にはより大きな画像を持っていました。

このスタイルは、すべての画像が使用可能なすべてのスペースを使用し、比率を保ち、カットされないようにするための魅力的なものです。

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

"height"プロパティを削除してください。

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

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

必要に応じて、サイズ超過を制限します。

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

これをcssに追加するだけで、元の比率を維持したまま自動的に伸縮します。

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

width、height、およびmax-widthを一緒に指定した画像の縦横比を維持する標準的な方法はありません。

そのため、画像のロード中にページの「ジャンプ」を防ぐためにwidthとheightを指定するか、画像のサイズを指定せずにmax-widthを使用する必要があります。

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

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

7
Marat Tanalin

反応性のある画像を維持しながら、その画像に特定の縦横比を持たせるには、次の操作を行います。

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;
  }
}

これは、作者がアップロードする画像のサイズに関係なく、特定の縦横比を強制するために使用できます。

@Ksesoのおかげで http://codepen.io/Kseso/pen/bfdhg 。他の比率と実用的な例については、このURLを確認してください。

5
Remi

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

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

そしてこれをあなたのCSSスタイルシートに追加してください。

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

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

あなたが幅の固定パーセンテージであるが幅の固定ピクセルではない）でimageを入れたいならば、答えはここにあります。

これは異なるサイズの画面を扱うとき）に役立ちます。

トリックは

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

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

これを実現する他の方法もあります。 htmlには実際の画像はありませんので、htmlに "img"要素が必要なときは、私は個人的にトップの答えを見てください。

背景を使用した単純なCSShttp://jsfiddle.net/4660s79h/2/

Wordが一番上にある背景画像http://jsfiddle.net/4660s79h/1/

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

5
Choco Li

正確なサイズに収まるようにイメージを強制するには、あまりにも多くのコードを書く必要はありません。とても簡単です

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">
4
aislamfaisal

これを使うことができます：

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

あなたはこのような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
2
Chun Yang

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

Setecによる解決策は、自動モードの "Shrink to Fit"に適しています。しかし、 'auto'モードに収まるように最適にエキスパンドするには、最初に受信した画像を一時的な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");
});

この方法は、受信した画像がディスプレイボックスよりも小さい場合に便利です。サイズと帯域幅を節約するために、大きいディスプレイボックスを埋めるには、拡張バージョンではなく、オリジナルの小さいサイズでサーバーに保存する必要があります。

1
Yselection Rajeev Shukla

垂直方向の配置に疑似要素を使用するのはどうですか。この少ないコードはカルーセル用ですが、すべての固定サイズのコンテナで機能すると思います。それは縦横比を保ち、最上部/最下部または最短寸法のために@/writeに@ 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;
      }
    }
0
Paul Bormans

フルスクリーンプレゼンテーション：

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

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

0
John
img {
  max-width: 80px; /* Also works with percentage value like 100% */
  height: auto;
}
<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="https://i.stack.imgur.com/aEEkn.png">

<p>Let's say the author of the HTML deliberately wants
  the height to be half the value of the width,
  this CSS will ignore the HTML author's wishes, which may or may not be what you want:
</p>
<img width="400" height="200" src="https://i.stack.imgur.com/aEEkn.png">
0
Flimm