web-dev-qa-db-ja.com

バウンディングボックスに合わせて画像を拡大縮小する

画像をバウンディングボックスに拡大縮小する（アスペクト比を維持する）ためのCSSのみの解決策はありますか？これは、画像がコンテナよりも大きい場合に機能します。

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

例：

しかし、私は寸法がコンテナの100％になるまで画像を拡大したいと思います。

htmlcssimageresizeautoresize
101
Thomas Guillory

注：これが一般的な回答ですが、 下記の回答 はより正確で、背景画像を使用するオプションがある場合は現在すべてのブラウザでサポートされています。

いいえ、両方向にこれを実行するCSSの唯一の方法はありません。あなたが追加することができます

.fillwidth {
    min-width: 100%;
    height: auto;
}

要素を常に100％幅にし、自動的に高さを縦横比、またはの逆数に変更します。

.fillheight {
    min-height: 100%; 
    width: auto;
}

常に最大の高さと相対的な幅に拡大縮小します。両方を行うには、縦横比がコンテナよりも大きいか小さいかを判断する必要があります。CSSではこれができません。

その理由は、CSSがページの外観を認識していないからです。それは事前にルールを設定しますが、それ以降は、要素がレンダリングされ、あなたが扱っているサイズと比率を正確に知ることができます。それを検出する唯一の方法はJavaScriptを使用することです。

あなたはJSソリューションを探していませんが、誰かがそれを必要とするかもしれないなら私はとにかくそれを追加します。 JavaScriptでこれを処理する最も簡単な方法は、比率の違いに基づいてクラスを追加することです。ボックスの幅と高さの比が画像の縦横比よりも大きい場合は、クラス "fillwidth"を追加し、そうでない場合はクラス "fillheight"を追加します。

$('div').each(function() {
  var fillClass = ($(this).height() > $(this).width()) 
    ? 'fillheight'
    : 'fillwidth';
  $(this).find('img').addClass(fillClass);
});
.fillwidth { 
  width: 100%; 
  height: auto; 
}
.fillheight { 
  height: 100%; 
  width: auto; 
}

div {
  border: 1px solid black;
  overflow: hidden;
}

.tower {
  width: 100px;
  height: 200px;
}

.trailer {
  width: 200px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
  <img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
  <img src="http://placekitten.com/150/150" />
</div>
87
Stephan Muller

CSS3のおかげで解決策があります！

解決策は、イメージをbackground-imageとして置き、次にbackground-sizeをcontainに設定することです。

HTML

<div class='bounding-box'>
</div>

CSS

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

ここでテストしてください。 http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

最新のブラウザとの完全な互換性： http://caniuse.com/background-img-opts

Divを中央に揃えるには、このバリエーションを使うことができます。

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}
158
Thomas Guillory

これが私が発見したハックな解決策です：

#image {
    max-width: 10%;
    max-height: 10%;
    transform: scale(10);
}

これにより画像は10倍に拡大されますが、最終的なサイズの10％に制限されます。つまり、コンテナにバインドされます。

background-imageソリューションとは異なり、これは<video>エレメントでも機能します。

34
Vladimir Panteleev

今日は、単にobject-fit：containを言ってください。サポートはIE以外のすべてです。 http://caniuse.com/#feat=object-fit

19
Glenn Maynard

背景画像がなく、コンテナが不要な別の解決策（ただし、バウンディングボックスの最大サイズはわかっている必要があります）。

img{
  max-height: 100px;
  max-width: 100px;
  width: auto;    /* These two are added only for clarity, */
  height: auto;   /* as the default is auto anyway */
}

img {
    max-height: 100%;
    max-width: 100%;
    width: auto; /* These two are added only for clarity, */
    height: auto; /* as the default is auto anyway */
}

div.container {
    width: 100px;
    height: 100px;
}

これのためにあなたは何かのようになるでしょう：

<table>
    <tr>
        <td>Lorem</td>
        <td>Ipsum<br />dolor</td>
        <td>
            <div class="container"><img src="image5.png" /></div>
        </td>
    </tr>
</table>
2
xerxeArt

html：

    <div class="container">
      <img class="flowerImg" src="flower.jpg">
    </div>

css：

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


.flowerImg{
  width: 100px;
  height: 100px;
  object-fit: cover;
  /*object-fit: contain;
  object-fit: scale-down;
  object-position: -10% 0;
  object-fit: none;
  object-fit: fill;*/
}
2
Deke

同じ長さの縦長画像と横長画像の両方に対して、純粋なCSSを使用してこれを実現できます。

これは、Chrome、Firefox、およびSafariで動作するスニペットです（両方ともobject-fit: scale-downを使用し、使用しないで）。

figure {
  margin: 0;
}

.container {
  display: table-cell;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border: 1px solid #aaa;
}

.container_image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container2_image2 {
  width: 80px;
  height: 80px;
  object-fit: scale-down;
  border: 1px solid #aaa;
}
Without `object-fit: scale-down`:

<br>
<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

<br> Using `object-fit: scale-down`:

<br>
<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>
1
gabrielmaldi

あなたは拡大ではなく縮小を見ていますか？

div {
    border: solid 1px green;
    width: 60px;
    height: 70px;
}

div img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    min-width: 500px;
    outline: solid 1px red;
}

しかしながら、これはアスペクト比を固定するものではありません。

1
ericosg

この例では、ウィンドウ全体に収まるように画像を比例的に引き伸ばします。上記の正しいコードへの即興は$( window ).resize(function(){});を追加することです。

function stretchImg(){
    $('div').each(function() {
      ($(this).height() > $(this).find('img').height()) 
        ? $(this).find('img').removeClass('fillwidth').addClass('fillheight')
        : '';
      ($(this).width() > $(this).find('img').width()) 
        ? $(this).find('img').removeClass('fillheight').addClass('fillwidth')
        : '';
    });
}
stretchImg();

$( window ).resize(function() {
    strechImg();
});

If条件が2つあります。最初のものは画像の高さがdivより小さいかどうかをチェックし続け、.fillheightクラスを適用しますが、次のものは幅をチェックして.fillwidthクラスを適用します。どちらの場合も、他のクラスは.removeClass()を使って削除されます。

これがCSSです

.fillwidth { 
   width: 100%;
   max-width: none;
   height: auto; 
}
.fillheight { 
   height: 100vh;
   max-width: none;
   width: auto; 
}

Div内で画像を引き伸ばしたい場合は、100vhを100%に置き換えることができます。この例では、ウィンドウ全体に収まるように画像を比例的に引き伸ばします。

1
Mr. JCRP

私はテーブルをボックスの内側の画像を中央に配置するために使いました。それはアスペクト比を保ち、完全にボックスの内側にあるように画像を拡大縮小します。画像がボックスよりも小さい場合は、中央にあるように表示されます。以下のコードは、幅40ピクセル、高さ40ピクセルのボックスを使用しています。 （他のより複雑なコードから削除して少し簡略化したため、うまくいくかどうかはよくわかりません）

CSS：

.SmallThumbnailContainer
{
    display: inline-block; position: relative;
    float: left;    
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    margin: 0px; padding: 0px;
}
.SmallThumbnailContainer { width: 40px; margin: 0px 10px 0px 0px; } 
.SmallThumbnailContainer tr { height: 40px; text-align: center; }
.SmallThumbnailContainer tr td { vertical-align: middle; position: relative; width: 40px;  }
.SmallThumbnailContainer tr td img { overflow: hidden; max-height: 40px; max-width: 40px; vertical-align: middle; margin: -1px -1px 1px -1px; }

HTML：

<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
    <tr><td>
        <img src="thumbnail.jpg" alt="alternative text"/>
    </td></tr>
    </table>
0
Antti

これは私を助けました：

.img-class {
  width: <img width>;
  height: <img height>;
  content: url('/path/to/img.png');
}

それから要素について（あなたは即応性を加えるためにjavascriptまたはメディアクエリーを使うことができます）：

<div class='img-class' style='transform: scale(X);'></div>

お役に立てれば！

0
bman93

これを行うための最もクリーンで簡単な方法：

最初のCSS：

div.image-wrapper {
    height: 230px; /* Suggestive number; pick your own height as desired */
    position: relative;
    overflow: hidden; /* This will do the magic */
    width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */
}
img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
}

The HTML：

<div class="image-wrapper">
  <img src="yourSource.jpg">
</div>

これでうまくいくはずです。

0
Robert Eetheart