有没有办法缩放背景图像样式？ [英] Is there a way to scale background-image style?

问题描述

如果我把正规的img标签在html，我可以基本上指定宽度和高度和浏览器将缩放图像。

例如，头像图片缩放为32x32，即使原始图片为45x45

p>

 < img width =32height =32alt =src =http://www.google。 com / friendconnect / scs / images / NoPictureDark.png> 
  

有没有办法在css background-image中缩放图像？

 < div class ='avatar'style ='background-image：url（hhttp：//www.google.com/friendconnect /scs/images/NoPictureDark.png\");'> 
  

我基本上想显示头像作为背景图像的属性，而不是通常的img标签，

解决方案

/ div>

这只能在CSS3中使用 background-size 属性。请参见规范和兼容性表。

If I put the regular img tag in html, I can basically specify width and height and browser will scale the image. As long as dimensions are not too far off from the original, the result is decent.

For example, the avatar image is scaled to 32x32 even though original is 45x45

<img width="32" height="32" alt="" src="http://www.google.com/friendconnect/scs/images/NoPictureDark.png">

Is there any way to scale the image in the css background-image, like this?

<div class='avatar' style='background-image:url("hhttp://www.google.com/friendconnect/scs/images/NoPictureDark.png");'>

I basically want to show avatar as a property of background-image instead of usual img tag and also need to scale it to size.

Is there any known trick that can do that?

解决方案

This is only possible in CSS3 using the background-size property. See spec and compatibility table.

这篇关于有没有办法缩放背景图像样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！