css 背景图片自动缩放实例

作者：袖梨 2022-06-25


默认情况下,背景属性是平铺的,如果背景图片较大,而box小,那么就只能显示左上角那块背景.如果要让背景全部显示出来,

 代码如下 复制代码

.color_checked {
 float: right;
 width: 16px;
 height: 16px;
 background: url(../images/color_check.png) center 0 no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

如果你还希望图片自动缩放

 代码如下 复制代码


#blogcon img { max-width: 400px; max-height: 400px; width: expression(this.width>400 && this.width>this.height ? 400 : true); height: expression(this.height > 400 ? 400 : true); }

这段话的意思解释一下：将id为blogcon标签下面的所有图像img标签的最大宽度设置为400px，最大高度设置为400px，宽度的判断如果图片宽度和高度都大于400的时候将高度按比例缩放。

原文来自:应用开发笔记

相关文章

精彩推荐