背景イメージのサイズを検出してdivの高さを適用する

Question

背景イメージと情報パネルを持つ一連の<div>コンテナがあります。

デスクトップバージョンでは、背景画像にbackground-size: cover;を使用して、<div>の幅と高さを入力します。

携帯電話に切り替えるときに、背景サイズをbackground-size: contain;に変更しました。これは、切り抜きが発生しないようにし、インラインイメージのように機能するようにするためです。

親の高さが固定されているため、余分な空白が作成されています。

CSSやJavaScriptで背景画像のサイズを計算してdivの高さに適用できますか？私はビューポートのサイズを変更してこれを行い、爽快感を避けたいと思います。

私はIE9 +でのサポートを目指しています。ここで

は、基本的なマークアップです：

.row { 
 
    position: relative; 
 
    margin-bottom: 1.5em; 
 
    height: 400px; 
 
    overflow: hidden; 
 
    /* Background image */ 
 
    background-repeat: no-repeat !important; 
 
    background-position: center !important; 
 
    background-size: cover !important; 
 
} 
 

 
.info { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    padding: 0 1.5em; 
 
    background-color: #dedede; 
 
    color: #000; 
 
} 
 

 
@media screen and (max-width: 1000px) { 
 
    .row { 
 
    background-size: contain !important; 
 
    } 
 
}

<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')"> 
 

 
    <div class="info"> 
 
    <h2>Title</h2> 
 
    <p>Some text goes here</p> 
 
    </div> 
 
    
 
</div> 
 

 
<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')"> 
 

 
    <div class="info"> 
 
    <h2>Title</h2> 
 
    <p>Some text goes here</p> 
 
    </div> 
 
    
 
</div> 
 

 
<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')"> 
 

 
    <div class="info"> 
 
    <h2>Title</h2> 
 
    <p>Some text goes here</p> 
 
    </div> 
 
    
 
</div> 
 

 
<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')"> 
 

 
    <div class="info"> 
 
    <h2>Title</h2> 
 
    <p>Some text goes here</p> 
 
    </div> 
 
    
 
</div>

Answer 1

あなたは、元画像と画像タグを作成することができる高さを設定すると幅を取得：

$(function() { 
 
    $('.row').each(function() { 
 
    var self = $(this); 
 
    var backgroundImage = self.css('background-image'); 
 
    if (backgroundImage.match(/url/)) { 
 
     var img = backgroundImage.match(/url\(['"]?(.*)['"]?\)/)[1]; 
 
     $('<img src="' + img + '"/>').appendTo('body').load(function() { 
 
     var img = $(this); 
 
     img.height(self.height()); 
 
     self.width(img.width()); 
 
     img.remove(); 
 
     }); 
 
    } 
 
    }); 
 
});

.row { 
 
    position: relative; 
 
    margin-bottom: 1.5em; 
 
    height: 400px; 
 
    overflow: hidden; 
 
    /* Background image */ 
 
    background-repeat: no-repeat !important; 
 
    background-position: center !important; 
 
    background-size: cover !important; 
 
} 
 

 
.info { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    padding: 0 1.5em; 
 
    background-color: #dedede; 
 
    color: #000; 
 
} 
 

 
@media screen and (max-width: 1000px) { 
 
    .row { 
 
    background-size: contain !important; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')"> 
 

 
    <div class="info"> 
 
    <h2>Title</h2> 
 
    <p>Some text goes here</p> 
 
    </div> 
 
    
 
</div> 
 

 
<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')"> 
 

 
    <div class="info"> 
 
    <h2>Title</h2> 
 
    <p>Some text goes here</p> 
 
    </div> 
 
    
 
</div> 
 

 
<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')"> 
 

 
    <div class="info"> 
 
    <h2>Title</h2> 
 
    <p>Some text goes here</p> 
 
    </div> 
 
    
 
</div> 
 

 
<div class="row" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')"> 
 

 
    <div class="info"> 
 
    <h2>Title</h2> 
 
    <p>Some text goes here</p> 
 
    </div> 
 
    
 
</div>

Answer 2

URLをデータ属性として設定できます。

<div class="row js-background" data-background="http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg" style="background: url('http://www.babyclothingzone.com/wp-content/uploads/2016/04/kitten_field_jump.jpeg')"> 

そしてプログラムで私は1つのdivで例を作ったが、あなたが取得するeachループ内でそれを使用することができます

var img = new Image(); 
img.onload = function() { 
    alert(this.width + 'x' + this.height); 
} 
img.src = document.getElementByClassName('js-background').getAttribute('background'); 

Answer 3

...画像を取得し、Javascriptを使用して寸法をご確認くださいすべてimagens：

// get the div, it can be in a each loop 
var div = $('.row').first(); 
var imgSrc = $(div).css('background-image').replace(/url\(['"]?(.*)['"]?\)/gi, '$1').split(',')[0].replace('"',''); 
// load a image with src of background 
var image = new Image(); 
image.src = imgSrc; 
// wait a while to load image and get the size 
image.onload = function() { 
    console.log(this.width); 
    console.log(this.height); 
} 

ここではフィドルです：https://jsfiddle.net/as3c2naz/

それが助けてくれることを願っています。