web-dev-qa-db-ja.com

ストレッチせずに画像をdivで完全に塗りつぶします

さまざまなサイズの大きな画像があり、両方のサイズで240x300ピクセルのコンテナを完全に埋める必要があります。ここに私が今得たものがありますが、これは1つの次元に対してのみ機能します

http://jsfiddle.net/HsE6H/

HTML

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

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

比率は変わらないはずです。基本的に、幅の広い画像は幅を切り取り、高画像は高さを切り捨てる必要があります。したがって、コンテナを埋めるのに必要なだけズームインします。

なぜ機能しないのかわかりませんが、これにはJavaScriptが必要ですか？

編集：明確にするために。バイオリンの赤い部分はすべて必要です。入ってくる画像は動的であるため、背景画像を使用できません。 JavaScriptを使用することに同意します。ありがとう！ :)

javascripthtmlcssimage
23
Lennart

Divに合わせて画像のサイズを自動調整する-CSSを機能させる

これを行う1つの方法は、次のHTMLから始めます。

<div class="container portrait">
    <h4>Portrait Style</h4>
    <img src="http://placekitten.com/150/300">
</div>

およびCSS：

.container {
    height: 300px;
    width: 240px;
    background-color: red;
    float: left;
    overflow: hidden;
    margin: 20px;
}
.container img {
    display: block;
}

.portrait img {
    width: 100%;
}
.landscape img {
    height: 100%;
}

デモフィドル： http://jsfiddle.net/audetwebdesign/QEpJH/

画像を縦向きにした場合、幅を100％に拡大する必要があります。逆に、画像が横向きの場合、高さを調整する必要があります。

残念ながら、CSSには画像のアスペクト比をターゲットとするセレクターの組み合わせがないため、CSSを使用して正しいスケーリングを選択することはできません。

さらに、画像の左上隅が包含ブロックの左上隅に固定されているため、画像を中央に配置する簡単な方法がありません。

jQuery Helper

次のjQueryアクションを使用して、画像のアスペクト比に基づいて設定するクラスを決定できます。

$(".container").each(function(){
    // Uncomment the following if you need to make this dynamic
    //var refH = $(this).height();
    //var refW = $(this).width();
    //var refRatio = refW/refH;

    // Hard coded value...
    var refRatio = 240/300;

    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();

    if ( (imgW/imgH) < refRatio ) { 
        $(this).addClass("portrait");
    } else {
        $(this).addClass("landscape");
    }
})

.containerの各画像について、高さと幅を取得し、width<heightかどうかをテストしてから、適切なクラスを設定します。

また、包含ブロックのアスペクト比を考慮するためのチェックを追加しました。以前は、正方形のビューパネルを暗黙的に想定していました。

42
Marc Audet

動的な画像を持たないこれを実行しようとしている人のために、背景画像を使用したすべてCSSのソリューションがあります。

<div class="container" 
    style="background-image: url('http://placehold.it/300x1500'); 
    background-size: cover; background-position: center;">
</div>
<div class="container" 
    style="background-image: url('http://placehold.it/1500x300'); 
    background-size: cover; background-position: center;">
</div>

「background-size：cover」は、アスペクト比を維持しながら、画像がすべてのdivを覆うように拡大縮小するようにします。 CSSはCSSファイルに移動することもできます。ただし、動的に生成される場合、background-imageプロパティはstyle属性にとどまる必要があります。

4
BurningLights

CSSファイルのmax-width：100％の行を取り出すと、うまくいくようです。

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

img {
height: auto;
}

また、HTMLファイルの終了divに>を追加すると、コードが見やすくなります。

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div>

動作するJSFiddleリンクは次のとおりです。 http://jsfiddle.net/HsE6H/19/

3
Jcpopp

私はこのプラグインを任意の比率を考慮して使用しました。また、動作するには imagesloaded プラグインが必要です。これは、この処理が必要なサイト全体の多数の画像に役立ちます。開始も簡単です。

https://github.com/johnpolacek/imagefill.js/

2
lxm7

バックグラウンドでこれを行うことができます

  1. 背景として画像を設定する

2。

div {
   -webkit-background-size: auto 100%;
   -moz-background-size: auto 100%;
   -o-background-size: auto 100%;
   background-size: auto 100%;
}

または

div {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
2
comonitos

これを試してください：

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

Imgスタイルの親divに次を追加すると機能します。 https://jsfiddle.net/yrrncees/10/

.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}
1
CodingSince007

これは仕事をすることができます：

.container {
    float: left;
    height: 300px;
    width: 240px;
    background-color: red;
    margin: 20px;
}

img {
    width:240px;
    height:300px;
}
0
SAST

同様の問題を解決しようとしていたので、このトピックに出会いました。それから電球が私の頭の中で消えてしまいましたが、それがとてもシンプルで明白だったので、私はそれが機能するとは信じられませんでした。

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}

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

Min-widthとmin-heightを100％に設定するだけで、divに合わせて常に自動的にサイズ変更され、余分な画像が切り取られます。騒ぎも騒ぎもありません。

0
outendesigns

Divの背景として画像を使用すると、多くの欠点があります（SEOのALTが見つからないなど）。その代わりに、イメージタグスタイルでobject-fit: cover;を使用してください！

0
Mehdi Saghari

上記のjQueryアプローチのバリエーションを使用したAngularアプリでパスをたどりました。それから、明るい同僚の1人が純粋なCSSアプローチを思いつきました。この例を参照してください： https://jsfiddle.net/jeffturner/yrrncees/1/ 。

基本的に行の高さを使用して、問題を解決しました。フィドルをヒットしたくない人のために、コードの断片は次のとおりです。

.container {
    margin: 10px;
    width: 125px;
    height: 125px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

重要なのは、行の高さを使用して、同じことを行うようにコンテナを設定することです。

0
Jeff Turner

Imgタグをdivタグに挿入する必要がある場合、次のソリューションは非常に簡潔でクリーンです。

.container, .container img 
{
        max-height: 300px;
        max-width: 240px;
}
Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>

<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-Shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>

また、divを使用する必要がない場合は、さらに短いCSSを記述することができます。

 img
    {
        max-height: 300px;
        max-width: 240px;
    }
0
willy wonka

ここに私が見つけた別の解決策があります。ポートレイドやランドスケープ、スクリプトを分ける必要はありません。

  <div class="container">
    <img src="http://placehold.it/500x500" class="pic" />
  </div>

CSS

.container{
  position: relative;
  width: 500px;
  height: 300px;
  margin-top: 30px;
  background: #4477bb;
}
.pic{
    max-width: 100%;
    width: auto;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

ここにあります、それはうまくいきます...

https://jsfiddle.net/efirat/17bopn2q/2/

0
efirat