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

Question

Suppose I have the following html:

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

demo

Here, the background-size is contain and is full width and height of 100% but the area of background image is not fully covered by the div.

So, is there any way to get the width and height of the covered image?

Answer 1

The documentation mentions the following about contain :

This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.

That would work out to the following code (ES6):

 function contain({width: imageWidth, height: imageHeight}, {width: areaWidth, height: areaHeight}) { const imageRatio = imageWidth / imageHeight; if (imageRatio >= areaWidth / areaHeight) { // longest edge is horizontal return {width: areaWidth, height: areaWidth / imageRatio}; } else { // longest edge is vertical return {width: areaHeight * imageRatio, height: areaHeight}; } } console.log(1, contain({width: 15, height: 60}, {width: 20, height: 50})); console.log(2, contain({width: 15, height: 60}, {width: 50, height: 20})); console.log(3, contain({width: 60, height: 15}, {width: 20, height: 50})); console.log(4, contain({width: 60, height: 15}, {width: 50, height: 20})); console.log(5, contain({width: 40, height: 20}, {width: 50, height: 20}));

Depending on the image orientation (portrait or landscape) it grows the longest edge first, then shrinks the shortest edge where necessary while still preserving the aspect ratio.

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

Answer 3

Use below CSS :

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

Answer 4

use this,will work

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