javascript - How to get contain size width and height? - Stack Overflow

admin管理员组

文章数量:1360003

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?

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?

• javascript
• jquery
• css
• viewport

Share Improve this question Follow edited Jun 10, 2014 at 5:03 Bhojendra Rauniyar asked Jun 10, 2014 at 4:30 Bhojendra RauniyarBhojendra Rauniyar 85.7k3636 gold badges177177 silver badges239239 bronze badges 6

• Related: stackoverflow./questions/15018068/… – scrowler Commented Jun 10, 2014 at 4:38
• calculate the aspect ratio for the original height and width of the image, and then use the height/width of the div(whichever is smaller, I would think) and then calculate the new height and width for the contained image. – Samy S.Rathore Commented Jun 10, 2014 at 4:56
• if you want dimensions of an image then use <img> element in <div> element. and then you can use javascript to get dimensions. – Mr_Green Commented Jun 10, 2014 at 4:57
• @SamyS.Rathore Could you please answer with an example? – Bhojendra Rauniyar Commented Jun 10, 2014 at 5:00
• @Mr_Green no, I cannot use. – Bhojendra Rauniyar Commented Jun 10, 2014 at 5:01

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 7

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.

Use below CSS :

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

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;

本文标签： javascriptHow to get contain size width and heightStack Overflow