web-dev-qa-db-ja.com

画像の縦横比を保ちながら、<div>を埋めるように画像をどのように伸ばすのですか。

<div>をオーバーフローさせたり、画像を歪めたりすることなく、この画像を可能な限り最大サイズまで引き伸ばす必要があります。

画像の縦横比は予測できないので、使用するかどうかを知る方法はありません。

<img src="url" style="width: 100%;">

または

<img src="url" style="height: 100%;">

両方を使用することはできません（つまり、style = "width：100％; height：100％;"）。これは<div>に合わせて画像を拡大するためです。

<div>のサイズは画面のパーセンテージで設定されていますが、これも予測不可能です。

imagehtmlsize
177
Giffyguy

2016年を更新：

最近のブラウザははるかによく振る舞います。あなたがする必要があるのは100％に画像幅を設定することです（ デモ ）

.container img {
   width: 100%;
}

アスペクト比がわからないので、スクリプトを使用する必要があります。これがjQuery（ demo ）でのやり方です。

CSS

.container {
    width: 40%;
    height: 40%;
    background: #444;
    margin: 0 auto;
}
.container img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}
.container img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}​

HTML

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>
<br />
<br />
<div class="container">
 <img src="http://i47.tinypic.com/i1bek8.jpg" />
</div>

スクリプト

$(window).load(function(){
 $('.container').find('img').each(function(){
  var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
  $(this).addClass(imgClass);
 })
})
173
Mottie

完璧な解決策ではありませんが、このCSSが役に立つかもしれません。ズームがこのコードを機能させるものであり、小さな画像に対して理想的に機能するためには理論的には無限大である必要があります。

#myImage {
    zoom: 2;  //increase if you have very small images

    display: block;
    margin: auto;

    height: auto;
    max-height: 100%;

    width: auto;
    max-width: 100%;
}
69
Prouda

CSSとHTMLのみを使用してこれを実行するはるかに簡単な方法があります。

HTML：

<div class="fill"></div>

CSS：

.fill {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-image: url('path/to/image.jpg');
}

これはあなたのイメージを背景として配置し、ゆがまずにdivサイズに合うように引き伸ばします。

66
Ryan

可能であれば、背景画像を使用してbackground-size: coverを設定してください。これで背景が要素全体を覆います。

CSS

div {
  background-image: url(path/to/your/image.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

インライン画像を使用している場合は、いくつかの選択肢があります。まず、あります

オブジェクトフィット

このプロパティは、background-size: coverに似た画像、ビデオ、その他のオブジェクトに作用します。

CSS

img {
  object-fit: cover;
}

悲しいことに、 ブラウザサポート はIEからそれほど素晴らしいものではありません。次のオプションはjQueryを使う

CSS + jQuery

HTML

<div>
  <img src="image.png" class="cover-image">
</div>

CSS

div {
  height: 8em;
  width: 15em;
}

カスタム jQueryプラグイン

(function ($) {
  $.fn.coverImage = function(contain) {
    this.each(function() {
      var $this = $(this),
        src = $this.get(0).src,
        $wrapper = $this.parent();

      if (contain) {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/contain no-repeat'
        });
      } else {
        $wrapper.css({
          'background': 'url(' + src + ') 50% 50%/cover no-repeat'
        });
      }

      $this.remove();
    });

    return this;
  };
})(jQuery);

このようなプラグインを使う

jQuery('.cover-image').coverImage();

画像を取得し、それを画像のwrapper要素の背景画像として設定して、ドキュメントからimgタグを削除します。最後にあなたが使用することができます

純粋なCSS

あなたはこれを代替として使うかもしれません。画像はコンテナをカバーするように拡大しますが、縮小することはありません。

CSS

div {
  height: 8em;
  width: 15em;
  overflow: hidden;
}

div img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  display: block;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

これが誰かに役立つことを願っています、幸せなコーディング！

28
daniels

CSS3のおかげで

img
{
   object-fit: contain;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

いつも部外者としてのIEとEdge： http://caniuse.com/#feat=object-fit

12
It_Never_Works

それはHTMLとCSSだけでは不可能、あるいは少なくとも大げさでエキゾチックで複雑です。 JavaScriptを投入しても構わない場合は、jQueryを使用した解決策を次に示します。

$(function() {
    $(window).resize(function() {
        var $i = $('img#image_to_resize');
        var $c = $img.parent();
        var i_ar = $i.width() / $i.height(), c_ar = $c.width() / $c.height();            
        $i.width(i_ar > c_ar ? $c.width() : $c.height() * (i_ar));
    });
    $(window).resize();
});

サイズに関係なく、常に親要素の内側に収まるように画像のサイズが変更されます。 $(window).resize()イベントにバインドされているので、ユーザーがウィンドウのサイズを変更すると、画像が調整されます。

これはコンテナの画像を中央に配置しようとするものではありません、それは可能でしょうが、私はそれがあなたが望むものではないと思います。

6
Tatu Ulmanen

外側のcontainer divの幅と高さを設定します。次に、imgの以下のスタイルを使用します。

.container img{
    width:100%;
    height:auto;
    max-height:100%;
}

これはあなたがあなたのimgのアスペクト比を保つのを助けるでしょう

5
Chintan Bhatt

私はこの問題に出会い、模擬問題を探しました。レスポンシブデザインのWebページを作成していますが、ページに配置される要素の幅は画面の幅のパーセントに設定されています。高さはvw値で設定されます。

私はPHPとデータベースバックエンドで投稿を追加しているので、純粋なCSSは問題外でした。しかし、私はjQuery/javascriptソリューションが少し面倒なことに気付いたので、私は（少なくとも私は自分自身だと思う）きちんとしたソリューションを思いついた。

HTML（またはphp）

div.imgfill {
  float: left;
  position: relative;
  background-repeat: no-repeat;
  background-position: 50%  50%;
  background-size: cover;
  width: 33.333%;
  height: 18vw;
  border: 1px solid black; /*frame of the image*/
  margin: -1px;
}
<div class="imgfill" style="background-image:url(source/image.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image2.jpg);">
  This might be some info
</div>
<div class="imgfill" style="background-image:url(source/image3.jpg);">
  This might be some info
</div>

Style = ""を使うことでPHPを自分のページを動的に更新することが可能になり、CSSスタイルをstyle = ""と一緒に使うと完全に覆われた画像になります。

4
Christian Jensen

画像の縦横比を保ちながら、最大幅または最大高さを設定したい場合は（それほど大きくならないように）、次のようにします。

img{
   object-fit: contain;
   max-height: 70px;
}
4
Bohao LI

親divにobject-fit: cover;を使うことができます。

https://css-tricks.com/almanac/properties/o/object-fit/

3
Amrit Anandh

この方法を使用すると、divと画像の比率を変えた画像でdivを埋めることができます。

jQuery：

$(window).load(function(){
   $('body').find(.fillme).each(function(){
      var fillmeval = $(this).width()/$(this).height();
      var imgval = $this.children('img').width()/$this.children('img').height();
      var imgClass;
      if(imgval > fillmeval){
          imgClass = "stretchy";
      }else{
          imgClass = "stretchx";
      }
      $(this).children('img').addClass(imgClass);
   });
});

HTML：

<div class="fillme">
   <img src="../images/myimg.jpg" />
</div>

CSS：

.fillme{
  overflow:hidden;
}
.fillme img.stretchx{
  height:auto;
  width:100%;
}
.fillme img.stretchy{
  height:100%;
  width:auto;
}
3
user1994142

このイメージをオーバーフローさせずに最大サイズまで引き伸ばすには、イメージを歪ませることが必要です。

適用する.

img {
  object-fit: cover;
  height: -webkit-fill-available;
}

画像のスタイル.

3
ianbeans

これは私のためのトリックでした

div img {
    width: 100%;
    min-height: 500px;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
}
3
Developer_D

2019を更新します。

次の値を受け入れるobject-fit cssプロパティを使用できるようになりました：fill | contain | cover | none | scale-down

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

例として、画像を保持するコンテナを作成できます。

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

.container {
    height: 50px;
    width: 50%;

.container_img {
    height: 100%;
    width: 100%;
    object-fit: cover;
2
Ed Stennett

あなたがIMGタグを使って作業しているなら、それは簡単です。

私はこれを作りました：

<style>
        #pic{
            height: 400px;
            width: 400px;
        }
        #pic img{
            height: 225px;               
            position: relative;
            margin: 0 auto;
        }
</style>

<div id="pic"><img src="images/menu.png"></div>

$(document).ready(function(){
            $('#pic img').attr({ 'style':'height:25%; display:none; left:100px; top:100px;' })
)}

#pic {background：url（img/menu.png）} Enyoneで動作させる方法がわかりませんか。ありがとう

2
aleXela

HTML：

<style>
#foo, #bar{
    width: 50px; /* use any width or height */
    height: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<div id="foo" style="background-image: url('path/to/image1.png');">
<div id="bar" style="background-image: url('path/to/image2.png');">

JSFiddle

...そして、画像を設定または変更したい場合（例として#fooを使用）：

jQuery：

$("#foo").css("background-image", "url('path/to/image.png')");

JavaScript：

document.getElementById("foo").style.backgroundImage = "url('path/to/image.png')";
1
Patch92

ここで見つかった解決策の多くはいくつかの制限があります：IE（object-fit）や古いブラウザで動かないもの、他の解決法は画像を拡大しない（縮小のみ）ウィンドウのサイズは多く、一般的なものではありません。どちらも解像度やレイアウトを修正する必要があります（縦または横）。

Javascriptとjqueryを使用しても問題ない場合は、@ Tatu Ulmanenのコードに基づいたこの解決策を使用します。私はいくつかの問題を修正し、画像が動的にロードされて開始時に利用できない場合のためにいくつかのコードを追加しました。基本的には、2つの異なるCSSルールを持ち、必要に応じて適用するというものです。1つは制限の高さなので、横に黒いバーを表示する必要があります。上部/下部に黒いバーを表示します。

function applyResizeCSS(){
    var $i = $('img#imageToResize');
    var $c = $i.parent();
    var i_ar = Oriwidth / Oriheight, c_ar = $c.width() / $c.height();  
    if(i_ar > c_ar){
        $i.css( "width","100%");
        $i.css( "height","auto");          
    }else{
        $i.css( "height","100%");
        $i.css( "width","auto");
    }
}   
var Oriwidth,Oriheight;
$(function() {
    $(window).resize(function() {
        applyResizeCSS();
    });

    $("#slide").load(function(){
        Oriwidth  = this.width,
        Oriheight = this.height; 
        applyResizeCSS();
    }); 

    $(window).resize();
});

次のようなHTML要素の場合

<img src="images/loading.gif" name="imageToResize" id="imageToResize"/>
1
jolumg

私は同様の問題を抱えていました。私はそれを CSS だけで解決しました。

基本的にObject-fit: coverは、div内に画像を配置しながらアスペクト比を維持するというタスクを達成するのに役立ちます。

しかし、問題はObject-fit: coverがIEで機能しておらず、幅100％、高さ100％でアスペクト比が歪んでいたことです。言い換えれば、私がクロムで見ていたイメージズーミング効果はそこにありませんでした。

私がとったアプローチは、 absolute を使ってコンテナの中に画像を配置し、それからそれを中央のに正しく配置することでした。

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/

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

0
Mohammed Furqan Rahamath M