获取CSS背景大小:覆盖比例百分比 [英] Get CSS background-size:cover scale percentage

问题描述

我需要弄清楚图像的缩放比例.

I need to figure out how much an image has scaled.

我正在使用background-size: cover将背景图像设置为body.基本上，无论屏幕大小是多少，图像都将始终保持其纵横比并扩大(或缩小)，直到它填满屏幕的宽度和高度.然后，它将定位自己，使其在垂直和水平方向居中，并裁剪掉多余"的东西.

I am setting a background image to the body with the background-size: cover. Basically, no matter what size the screen is, the image will always keep its aspect ratio and expand (or shrink) until it fills both the width and height of the screen. It will then position itself so it centers both vertically and horizontally with the "excess" cropped.

假设我知道 1)原始背景图片尺寸 2)屏幕/视口站点

Assuming that I know 1) The original background image size 2) The screen/viewport site

如何确定图像实际缩放了多少?

how can I figure out how much the image has actually scaled?

推荐答案

如果我们假设您的图片的尺寸为WxH，并且屏幕尺寸为AxB，则它应该是A/W和B/H.

If we suppose your image has a dimension of WxH and the screen size is AxB then it should be the biggest value between A/W and B/H.

一些例子:

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

对于contain，我们取最小值:

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

这篇关于获取CSS背景大小:覆盖比例百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！