问题描述
|
这么简单。
将我的布局移动到一个可变的区域,处理可伸缩图像。使用img标签并将max-width设置为100%可以完美地工作,但是我宁愿使用div作为背景图像。
我遇到的问题是图片无法缩放到其背景中的div大小。有什么方法可以将标记添加到后台代码中,以将其设置为容器宽度的100%?
#one {
background: url(\'../img/blahblah.jpg\') no-repeat;
max-width: 100%;
}
解决方法
您可以使用
background-size
进行此操作:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
您可以将ѭ1设置为cover
以外的许多值,看看哪个对您有用:https://developer.mozilla.org/en/CSS/background-size
规格:https://www.w3.org/TR/css-backgrounds-3/#the-background-size
它适用于所有现代浏览器:http://caniuse.com/#feat=background-img-opts
, 正如三十点所说,您可以使用CSS3background-size
语法:
例如:
-o-background-size:35% auto;
-webkit-background-size:35% auto;
-moz-background-size:35% auto;
background-size:35% auto;
但是,正如三十点所述,这在IE6、7和8中不起作用。
有关the1 for的更多信息,请参见以下链接:
http://www.w3.org/TR/css3-background/#the-background-size
, 您似乎正在尝试缩放背景图片?参考波纹管中有一篇很棒的文章,您可以在其中使用css3来实现此目的。
如果我错过了阅读的问题,那么我谦卑地接受投票。 (尽管还是很高兴知道)
请考虑以下代码:
#some_div_or_body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
这在所有主流浏览器上都可以使用,当然在IE上并非易事。但是,有一些解决方法,例如使用Microsoft的筛选器:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'.myBackground.jpg\',sizingMethod=\'scale\');
-ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'myBackground.jpg\',sizingMethod=\'scale\')\";
通过使用jQuery,有些替代项可以使您高枕无忧:
的HTML
<img src=\"images/bg.jpg\" id=\"bg\" alt=\"\">
的CSS
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
jQuery的:
$(window).load(function() {
var theWindow = $(window),$bg = $(\"#bg\"),aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass(\'bgheight\');
} else {
$bg
.removeClass()
.addClass(\'bgwidth\');
}
}
theWindow.resize(resizeBg).trigger(\"resize\");
});
我希望这有帮助!
Src:完美的整页背景图像
, 不幸的是,CSS中没有min
(或max
)-background-size,您只能使用
background-size
。但是,如果您要寻找响应式背景图像,则可以对background-size
属性使用Vmin
和Vmax
单位来实现类似的效果。
例:
#one {
background:url(\'../img/blahblah.jpg\') no-repeat;
background-size:10vmin 100%;
}
会将高度设为您所拥有的较小视口(垂直或水平)的10%,并将宽度设为100%。
在此处阅读有关CSS单元的更多信息:https://www.w3schools.com/cssref/css_units.asp