一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

PHP教程 Css教程 操作系统 数据库 安卓下载 AI头条

首页 游戏下载 软件下载 专题 资讯教程 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
+ -
当前位置：一聚教程网 > css教程 > 高级应用

推荐专题

最新下载

热门教程

css 背景图片自动缩放实例

时间：2022-06-25 11:08:19 编辑：袖梨 来源：一聚教程网


默认情况下,背景属性是平铺的,如果背景图片较大,而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的时候将高度按比例缩放。

原文来自:应用开发笔记

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2022 www.111CN.NET AII Right Reserved

网站内容来自网络整理或网友投稿如有侵权行为请邮件:[email protected] 我们24小时内处理