幅の高さの比率を維持しながら、小さな画像を小さな幅のdivコンテナーに収まるように、大きな画像をどのように自動サイズ変更しますか？

例：stackoverflow.com-画像がエディターパネルに挿入され、画像が大きすぎてページに収まらない場合、画像は自動的にサイズ変更されます。

画像タグに明示的な幅または高さを適用しないでください。代わりに、それを与えます：

max-width:100%;
max-height:100%;

また、height: auto;幅のみを指定したい場合。

例：http : //jsfiddle.net/xwrvxser/1/

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

オブジェクトフィット

これを行う別の方法があることがわかりました。

<img style='height: 100%; width: 100%; object-fit: contain'/>

仕事をします。それはCSS 3のものです。

フィドル：http : //jsfiddle.net/mbHB4/7364/

現在、これを確定的な方法で正しく行う方法はありません。JPEGやPNGファイルなどの固定サイズのイメージでは。

画像を均等にサイズ変更するには、高さまたは幅のいずれかを「100％」に設定する必要がありますが、両方に設定する必要はありません。両方を「100％」に設定すると、画像が引き伸ばされます。

高さと幅のどちらを選択するかは、画像とコンテナのサイズによって異なります。

1. 画像とコンテナの両方が「縦長の形状」または「横長の形状」（幅よりも高い、または高さよりも幅が広い）の場合、高さと幅のどちらが「％100」であるかは関係ありません。 。
2. 画像が縦向きで、コンテナが横向きの場合はheight="100%"、画像に設定する必要があります。
3. 画像が横向きで、コンテナが縦向きの場合はwidth="100%"、画像に設定する必要があります。

画像が可変サイズのベクター画像形式であるSVGの場合、コンテナに合わせて自動的に拡張することができます。

SVGファイルの<svg>タグにこれらのプロパティが設定されていないことを確認する必要があります。

height
width
viewbox

そこにあるほとんどのベクター描画プログラムはSVGファイルをエクスポートするときにこれらのプロパティを設定するため、エクスポートするたびにファイルを手動で編集するか、それを行うスクリプトを作成する必要があります。

提供されている画像が小さすぎたり大きすぎたりしてdivに収まらない場合でも、div内でimgを垂直方向と水平方向の両方に配置して、ストレッチを行わないソリューションを次に示します。

HTMLコンテンツ：

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

CSSコンテンツ：

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

jQueryの部分：

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

それを簡単に！

コンテナを固定して heightから、コンテナimg内のタグにとを設定widthしmax-heightます。

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

違いはwidth、ではなくを100％に設定することですmax-width。

美しいハック。

画像をレスポンシブにする方法は2つあります。

1. 画像が背景画像の場合。

#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

ここで実行してください

2. 画像がimgタグ内にある場合。

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

ここで実行してください

画像をdivの背景として設定し、CSSのbackground-sizeプロパティを使用できます。

background-size: cover;

これは、あろう「背景領域が完全に背景画像によって覆われることが可能なように大型のように、背景画像を拡大縮小、背景画像の一部が背景配置領域内ビューでないかもしれません。」 - W3Schoolsの

私の解決策をチェックしてください：http : //codepen.io/petethepig/pen/dvFsA

JavaScriptコードなしで純粋なCSSで記述されています。任意のサイズと方向の画像を処理できます。

そのようなHTMLを考えると：

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

CSSコードは次のようになります。

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

私はちょうどあなたが多くのオプションであなたが必要とするものを正確に実行するjQueryプラグインを公開しました：

https://github.com/GestiXi/image-scale

使用法：

HTML

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});

このソリューションは、画像を引き伸ばすことなく、コンテナー全体を塗りつぶしますが、画像の一部を切り取ります。

HTML：

 <div><img src="/images/image.png"></div>

CSS：

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}

多くの人がオブジェクトフィットを推奨していると思います。これは良い選択肢です。しかし、それを古いブラウザでも機能させたい場合は、簡単に実行する別の方法があります。

とてもシンプルです。私が取ったアプローチはして容器内の画像を配置した 絶対、その後、中央で右のそれを置くの組み合わせを使用しました：

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

それが中央に来たら、私はイメージに与えます、

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

これにより、画像はObject-fit：coverの効果を得ます。

上記のロジックのデモを以下に示します。

https://jsfiddle.net/furqan_694/s3xLe1gp/

このロジックはすべてのブラウザで機能します。

以下は私にとって完璧に機能します：

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

JavaScriptを必要としない、はるかに優れたソリューションがあります。それは完全に応答性があり、私はそれを頻繁に使用します。多くの場合、アスペクト比の画像を、指定したアスペクト比のコンテナ要素に合わせる必要があります。そして、これを完全に応答性の高いものにすることは必須です。

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}

<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

最大幅と最大高さを個別に設定できます。画像は最小のものを尊重します（画像の値とアスペクト比によって異なります）。また、画像を好きなように配置するように設定することもできます（たとえば、無限の白い背景の製品画像の場合は、簡単に中央下部に配置できます）。

画像に必要な高さと幅を、<img>タグを含むdivに渡します。適切なスタイルタグで高さ/幅を指定することを忘れないでください。

<img>タグで、max-heightand max-widthを100％として指定します。

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

正しく理解したら、適切なクラスに詳細を追加できます。

以下のコードは以前の回答から適応され、と呼ばれるイメージを使用して私がテストしましたstorm.jpg。

これは、画像を表示する単純なページの完全なHTMLコードです。これは完璧に機能し、www.resizemybrowser.comで私がテストしました。CSSコードをHTMLコードの上部、ヘッドセクションの下に配置します。好きな場所に画像コードを配置します。

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

配置する場所の高さをブラウザに伝える必要があります。

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

編集： Internet Explorer 11では、以前のテーブルベースの画像の配置に問題がありました（要素でmax-heightは機能しませんdisplay:table）。Internet Explorer 7とInternet Explorer 11の両方で正常に機能するだけでなく、必要なコードも少ないインラインベースのポジショニングに置き換えました。

これが私の主題です。コンテナーが指定されたサイズの場合にのみ機能します（具体的なサイズのないコンテナーmax-widthとmax-heightはうまくいかないようです）が、再利用できるようにCSSコンテンツを記述しました（picture-frameクラスを追加）そしてpx125、既存のコンテナにサイズクラス）。

CSS：

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

そしてHTMLでは：

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

デモ

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}

<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

編集：JavaScriptを使用してさらに改善できる可能性があります（画像のアップスケーリング）：

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

次のコードを使用してこの問題を修正しました。

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

ここに答え、あなたも使用できるvh代わりの単位max-height: 100%、それは（クロムなど）、ブラウザ上で動作しない場合は：

img {
    max-height: 75vh;
}

次のように、ハイパーリンク内の画像を水平方向と垂直方向の両方に比例して中央揃えし、拡大縮小しました。

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Internet Explorer、Firefox、Safariでテストされています。

センタリングの詳細については、こちらをご覧ください。

Thorn007からの承認された回答は、画像が小さすぎる場合は機能しません。

これを解決するために、スケールファクターを追加しました。これにより、画像が大きくなり、divコンテナーがいっぱいになります。

例：

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

ノート：

1. WebKitの場合-webkit-transform:scale(4); -webkit-transform-origin:left top;は、スタイルを追加する必要があります。
2. スケール係数が4の場合、max-width = 400/4 = 100およびmax-height = 200/4 = 50になります。
3. 代替ソリューションは、最大幅と最大高さを25％に設定することです。さらにシンプルです。

Bootstrapを使用している場合はimg-responsive、imgタグにクラスを追加するだけです。

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

ブートストラップ画像

私にとってはうまくいくと思われる簡単な解決策（4ステップの修正!!）を以下に示します。この例では、幅を使用して全体のサイズを決定していますが、幅を反転して高さを使用することもできます。

1. 画像コンテナー（<img>など）にCSSスタイルを適用する
2. widthプロパティを必要な寸法に設定します
   • 寸法については%、相対サイズ、または自動スケーリング（画像コンテナまたはディスプレイに基づく）に使用します
   • px静的またはセットディメンションに（またはその他の）を使用する
3. 幅に基づいて自動的に調整するように高さプロパティを設定します
4. 楽しい！

例えば、

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

受け入れられたものを含め、提供されたすべての回答は、ラッパーが固定サイズであるという前提の下でのみ機能しdivます。だから、これはそれを行う方法ですどんなのサイズdivのラッパーであり、あなたが応答ページを開発する場合、これは非常に便利です。

これらの宣言をDIVセレクター内に記述します。

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

次に、これらの宣言をIMGセレクター内に配置します。

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

非常に重要：

の値は、セレクタとセレクタの両方で同じでmaxHeightなければなりません。DIVIMG

簡単な解決策は、フレックスボックスを使用することです。コンテナのCSSを次のように定義します。

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

含まれる画像の幅を100％に調整すると、寸法が保持された状態でコンテナー内の中央に配置された画像が表示されます。

少しの計算で解決策は簡単です...

画像をdivに入れてから、画像を指定するHTMLファイルに入れます。画像のピクセル値を使用して幅と高さの値をパーセンテージで設定し、幅と高さの正確な比率を計算します。

たとえば、幅が200ピクセル、高さが160ピクセルの画像があるとします。幅の値が大きいので、幅の値は100％になります。高さの値を計算するには、高さを幅で割るだけで、80％のパーセンテージ値が得られます。コードでは次のようになります...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

これを行う最も簡単な方法は、以下を使用することobject-fitです。

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

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

ブートストラップを使用している場合は、img-responsiveクラスを追加して次のように変更します

.container img{
    object-fit: cover;
}

私の答えを確認してください、画像をレスポンシブにしてください-最も簡単な方法 -

img{
    width: 100%;
    max-width: 800px;
}

または、単に次のように使用できます。

background-position:center;
background-size:cover;

これで、イメージはdivのすべてのスペースを取ります。