背景尺寸:包含,获得尺寸后的尺寸 [英] Background Size: Contain, get Size after scale
问题描述
在CSS中,我将一个按钮设置为100px x 100px,并具有background-size:contains;
在javascript中,我将图像应用于我所做的元素不具有高度/宽度(也不是长宽比)。
在javascript中的另一个函数中,我需要能够通过contains函数获取此按钮的图像/背景的大小。
有任何方法可以做到这一点(我也可以访问Jquery)
小示例:
< style>
#imageButton {
width:100px;
height:100px;
background:url(imageURL);
background-size:contains!important;
}
< / style>
< script>
var imageElem = $('#imageButton')[0];
console.log($(imageElem).width());
// 100px但需要缩放后的图像宽度
< / script>
CSS属性 background-size :contains;
将图像缩放到最大,以便高度和宽度都适合内部,保持相同的高宽比。
就像@Teemu所说,背景图片是一个有点伪元素,你实际上不能参考。但我可以告诉你一个解决方法,如何获得真实的图像尺寸和计算缩放的背景图像大小。
它的工作原理比例和比例其中:
resized_image_width 指向 resized_image_height 的 real_image_height / p>首先,我们需要获得图像的真实大小:
var img = new Image;
img.src = $('#imageButton')。css('background-image')。replace(/ url\(| \)$ / ig,);
var imgW = img.width;
var imgH = img.height;然后,比较哪个维度最大并计算比例:
var newW,newH;
if(imgW> imgH){
newW = $('#imageButton')。width(); // 100;
newH = imgH / imgW * newW;
} else {
newH = $('#imageButton')。height(); // 100
newW = imgW / imgH * newH;
}
console.log(newW +':'+ newH);
如果图片尚未加载或缓存,则会返回0的大小,修复这是使用 .load()
函数加载图片时获取大小。
浏览器也有不同的子像素渲染,我想你需要舍入到最接近的.5十进制,以获得确切的最安全的值( 43.7832 => 43.5 )。使用:(Math.round(value * 2)/ 2).toFixed(1)
以下是示例小提琴。
In CSS I set a button to be 100px x 100px and have the background-size: contain;
In javascript I apply an image to the element that I do not have the Height/width of (nor aspect ratio) .
In another function in javascript I need to be able to get the size of the image/background of this button after it has passed through the contain function.
Is there any way to do this (I have access to Jquery as well)
Small Sample:
<style>
#imageButton{
width: 100px;
height: 100px;
background: url("imageURL");
background-size: contain !important;
}
</style>
<script>
var imageElem = $('#imageButton')[0];
console.log($(imageElem).width());
//100px but need width of image after scaling
</script>
解决方案 CSS property background-size: contain;
scales the image to the largest so that both the height and width will fit inside, retaining the same aspect ratio of course.
Just like @Teemu said, A background image is a kinda pseudo element which you actually can't refer. But I can show you a workaround on how to get the real image size and compute the scaled background-image size.
It works like ratio and proportion where:
real_image_width is to real_image_height as resized_image_width is to resized_image_height
First we need to get the real size of the image:
var img = new Image;
img.src = $('#imageButton').css('background-image').replace(/url\(|\)$/ig, "");
var imgW = img.width;
var imgH = img.height;
Then, compare which dimension is the largest and calculate the proportion:
var newW, newH;
if(imgW > imgH){
newW = $('#imageButton').width(); //100;
newH = imgH / imgW * newW;
}else{
newH = $('#imageButton').height(); //100
newW = imgW / imgH * newH;
}
console.log(newW+':'+newH);
If the image is not yet loaded or cached it will return a size of 0, a good way to fix this is to get the size when the image is has been loaded using .load()
function.
Browsers also differ in sub-pixel rendering, I think you need to round off to nearest .5 decimal to get the exact safest value (43.7832 => 43.5). Using: (Math.round(value * 2) / 2).toFixed(1)
That's it! Here is the sample fiddle.
这篇关于背景尺寸:包含,获得尺寸后的尺寸的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!