如何按比例缩放div的CSS背景中的背景图像？
[英]How to scale background image proportionally which is in css background of a div?
问题描述
How to scale background image proportionally which is in background of a div? 
如何按比例缩放div背景中的背景图像？ I'm not asking background resizing of full <body> background. 我不是在要求整个<body>背景的背景大小调整。
In this jsfiddle example http://jsfiddle.net/jitendravyas/aQCen/1/ you will see that text is re-sizing proportionally when you reszie the browser or js fiddle result window. 在这个jsfiddle示例http://jsfiddle.net/jitendravyas/aQCen/1/中 ，当您调整浏览器或js提琴结果窗口时，您将看到文本按比例调整大小。 but in this image is not resizing. 但在此图像中没有调整大小。 and I also want to scale the image like text. 而且我也想像文字一样缩放图像。
I already know the way to resize the image if use it as <img> in mark-up. 我已经知道将图像用作标记中的<img>来调整图像大小的方法。 but in this question I'm asking about how to resize the image which is in css background 但在这个问题上，我想问的是如何调整CSS背景中的图片大小
2 个解决方案
解决方案1
5 2011-10-19 12:50:31
You can use the css3 property " background-size " however only IE9+, Firefox 4 and Webkit browsers support this. 您可以使用css3属性“ background-size ”，但是仅IE9 +，Firefox 4和Webkit浏览器支持此功能。 The " cover " and " contain " values might be worth looking at - cover scales the background image to the maximum width or height of the container without cropping the image, whereas contain scales to completely fill the container while some areas may not be visible. “ cover ”和“ contain ”值可能值得一看-Cover将背景图像缩放到容器的最大宽度或高度而不会裁剪图像，而“ contain”将比例完全填充容器，而某些区域可能不可见。
See more here: http://www.css3.info/preview/background-size/ 在此处查看更多信息： http : //www.css3.info/preview/background-size/
解决方案2
3 已采纳
try this 尝试这个
<div style="height:100px;width:100px;
background-color:red;
background-image:url('test.jpg');
background-size:contain;
background-repeat:no-repeat;
background-position:center;"></div>
<div style="height:100px;width:100px;
background-color:red;
background-image:url('test.jpg');
background-size:cover;
background-repeat:no-repeat;
background-position:center;"></div>
working in gecko/webkit/opera and probably newers msie 在gecko / webkit / opera中工作，并且可能是较新的msie
full documentation at: 完整文档位于：
https://developer.mozilla.org/en/CSS/background-size https://developer.mozilla.org/en/CSS/background-size
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.