What is the technique for determining the scale percentage of an image with the background-size property set to cover?

Question

What is the technique for determining the scale percentage of an image with the background-size property set to cover?

I am trying to determine the scale of an image after it has been resized.

By using background-size: cover on the body background image, I want to ensure that the image maintains its aspect ratio and expands or shrinks to fit both the width and height of the screen.

The image will be centered vertically and horizontally on the screen with any excess cropped out.

If I know:

The original size of the background image
The size of the screen/viewport

How can I calculate the actual scaling factor applied to the image?

css background

Answer 1

Answer №1

Assuming your image has dimensions WxH and the screen size is AxB, then the value should be the largest between A/W and B/H.

Here are some examples:

.box {
  width:400px;
  height:200px;
  background:url(https://picsum.photos/300/300?image=0) center/cover;
}
/*
we will have 1.333 = 400/300 and 0.6667 = 200/300
*/
img {
 transform:scale(1.3333);
 transform-origin:top left;
}

<div class="box">

</div>
<img src="https://picsum.photos/300/300?image=0">

.box {
  width:300px;
  height:200px;
  background:url(https://picsum.photos/500/500?image=0) center/cover;
}
/*
we will have 0.6 = 300/500 and 0.4 = 200/500
*/
img {
 transform:scale(0.6);
 transform-origin:top left;
}

<div class="box">

</div>
<img src="https://picsum.photos/500/500?image=0">

.box {
  width:100px;
  height:300px;
  background:url(https://picsum.photos/400/300?image=0) center/cover;
  display:inline-block;
}
/*
we will have 0.25 = 100/400 and 1 = 300/300
*/
img {
 transform:scale(1);
 transform-origin:top left;
}

<div class="box">

</div>
<img src="https://picsum.photos/400/300?image=0">

Using contain gives us the smallest value:

.box {
  width:400px;
  height:200px;
  background:url(https://picsum.photos/300/300?image=0) left/contain no-repeat;
}
/*
we will have 1.333 = 400/300 and 0.6667 = 200/300
*/
img {
 transform:scale(0.6667);
 transform-origin:top left;
}

<div class="box">

</div>
<img src="https://picsum.photos/300/300?image=0">

.box {
  width:300px;
  height:200px;
  background:url(https://picsum.photos/500/500?image=0) left/contain no-repeat;
}
/*
we will have 0.6 = 300/500 and 0.4 = 200/500
*/
img {
 transform:scale(0.4);
 transform-origin:top left;
}

<div class="box">

</div>
<img src="https://picsum.photos/500/500?image=0">

.box {
  width:100px;
  height:300px;
  background:url(https://picsum.photos/400/300?image=0) top/contain no-repeat;
  display:inline-block;
}
/*
we will have 0.25 = 100/400 and 1 = 300/300
*/
img {
 transform:scale(0.25);
 transform-origin:top left;
}

<div class="box">

</div>
<img src="https://picsum.photos/400/300?image=0">

Answer 2

Assuming your image has dimensions WxH and the screen size is AxB, then the value should be the largest between A/W and B/H.

Here are some examples:

.box {
  width:400px;
  height:200px;
  background:url(https://picsum.photos/300/300?image=0) center/cover;
}
/*
we will have 1.333 = 400/300 and 0.6667 = 200/300
*/
img {
 transform:scale(1.3333);
 transform-origin:top left;
}

<div class="box">

</div>
<img src="https://picsum.photos/300/300?image=0">

.box {
  width:300px;
  height:200px;
  background:url(https://picsum.photos/500/500?image=0) center/cover;
}
/*
we will have 0.6 = 300/500 and 0.4 = 200/500
*/
img {
 transform:scale(0.6);
 transform-origin:top left;
}

<div class="box">

</div>
<img src="https://picsum.photos/500/500?image=0">

.box {
  width:100px;
  height:300px;
  background:url(https://picsum.photos/400/300?image=0) center/cover;
  display:inline-block;
}
/*
we will have 0.25 = 100/400 and 1 = 300/300
*/
img {
 transform:scale(1);
 transform-origin:top left;
}

<div class="box">

</div>
<img src="https://picsum.photos/400/300?image=0">

Using contain gives us the smallest value:

.box {
  width:400px;
  height:200px;
  background:url(https://picsum.photos/300/300?image=0) left/contain no-repeat;
}
/*
we will have 1.333 = 400/300 and 0.6667 = 200/300
*/
img {
 transform:scale(0.6667);
 transform-origin:top left;
}

<div class="box">

</div>
<img src="https://picsum.photos/300/300?image=0">

.box {
  width:300px;
  height:200px;
  background:url(https://picsum.photos/500/500?image=0) left/contain no-repeat;
}
/*
we will have 0.6 = 300/500 and 0.4 = 200/500
*/
img {
 transform:scale(0.4);
 transform-origin:top left;
}

<div class="box">

</div>
<img src="https://picsum.photos/500/500?image=0">

.box {
  width:100px;
  height:300px;
  background:url(https://picsum.photos/400/300?image=0) top/contain no-repeat;
  display:inline-block;
}
/*
we will have 0.25 = 100/400 and 1 = 300/300
*/
img {
 transform:scale(0.25);
 transform-origin:top left;
}

<div class="box">

</div>
<img src="https://picsum.photos/400/300?image=0">

What is the technique for determining the scale percentage of an image with the background-size property set to cover?

Answer №1

Similar questions

The styles defined in CSS do not have an impact on EJS templates that have GET route paths stacked

Arrange the "See More" button in the Mat Card to overlap the card underneath

What is the best method to adjust the scrollbar to the correct position on the table?

Struggling to align the Title Tags perfectly in the center of Images

Tips for creating a full-screen background image using HTML and CSS

Designing divs that intersect

Tips for preventing a bootstrap modal from being dragged beyond its parent container

What is the best way to stack div elements one after the other?

What could be the reason for the lower section of my website not being displayed?

On the initial page load, Magento is failing to load the CSS properly

Send a POST form from my website to another website and retrieve the data from the remote server

Enhancing Images with Dynamic Captions Using JQuery

Is it possible to restrict the application of jquery .css() to a particular media query only?

Unable to retrieve list using Selenium in C# due to issues with FindElements method

What are the best strategies for ensuring this website is fully optimized for all devices

Ways to conceal the label without using JavaScript when focusing

Selecting radio button does not update corresponding label

"Make your slides smooth and responsive with the unslick option in slick

Creating a resilient CSS: DOM for seamless printing in PDF or on physical printers

"Implementing master page and CSS styles on a child page: A step-by-step