使用background-size:cover时如何获取图像的比例百分比? [英] How to get the scale percentage of an image when using background-size:cover?

问题描述

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

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. 屏幕/视口站点

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

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

这篇关于使用background-size:cover时如何获取图像的比例百分比?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！