如何获得包含大小的宽度和高度？

Question

假设我有以下html：

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

demo

此处，背景大小包含并且是100％的全宽和高度，但背景图像的区域未被div完全覆盖。

那么，有没有办法获得被覆盖图像的宽度和高度？

Answer 1

documentation提及以下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;
    }
}

根据图像方向（纵向或横向），它首先生长最长边，然后在必要时收缩最短边，同时仍然保留纵横比。

Answer 2

修改::

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;

Answer 3

使用以下CSS：

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

Answer 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>