Как получить размер и ширину размера?

Предположим, что у меня есть следующий html:

html,body{
    height: 100%;
    overflow-y: hidden;
}
div{
    background: url(path) no-repeat center;
    width: 100%;
    height: 100%;
    background-size: contain;
}

демо

Здесь размер фона содержит и имеет полную ширину и высоту 100%, но область фонового изображения не полностью покрывается div.

Итак, есть ли способ получить ширину и высоту закрытого изображения?

Ответ 1

В документации упоминается следующее о contain:

Это ключевое слово определяет, что фоновое изображение должно быть масштабировано настолько, насколько возможно, при этом обе его размеры меньше или равны соответствующим размерам области фонового позиционирования.

Это будет соответствовать следующему коду:

imageRatio = imageWidth / imageHeight;

if (imageRatio >= 1) { // landscape
    imageWidth = areaWidth;
    imageHeight = imageWidth / imageRatio;
    if (imageHeight > areaHeight) {
        imageHeight = areaHeight;
        imageWidth = areaHeight * imageRatio;
    }
} else { // portrait
    imageHeight = areaHeight;
    imageWidth = imageHeight * imageRatio;
    if (imageWidth > areaWidth) {
        imageWidth = areaWidth;
        imageHeight = areaWidth / imageRatio;
    }
}

В зависимости от ориентации изображения (портретной или альбомной) он сначала вырабатывает самый длинный край, а затем сжимает самый короткий край, когда это необходимо, сохраняя при этом пропорции.

Ответ 2

Edit::

var width = $('.demo').width(); //demo is div class name
var height = $('.demo').height();

// if width > height
var imgWidth = width > height ? actualImgWidth/actualImgHeight * height : width;
//if width < height
var imgHeight = height > width ? actualImgHeight/actualImgWidth * width : height;

Ответ 3

Используйте ниже CSS:

div{
    background: url("Your Image Path") no-repeat;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: 100% auto;
  }

Ответ 4

используйте это, будет работать

<script>
$(function() {

 var width=$(".divmenu").width();   //get width and height of div
var height= $(".divmenu").height(); 


$(".divmenu").css('background-size',width ,height);//add width,height into background-size





}); 
</script>