纯CSS无表达式实现未知尺寸图片等比缩放(支持IE7及以上)

所属栏目:建站技术 发布时间:2020-10-30 点击: 文章来源:https://www.sznest.net/html/list2show.php?id=3540

在制作网页的时候,常常会遇到一种情况,我们需要把一些未知尺寸的图片放在一个固定宽高的容器中,这时候我们需要考虑这样的问题:

只给图片设置宽度或高度的其中一项可以实现图片等比缩放,但图片可能超出容器大小。
给图片设置固定的宽高可能导致图片变形。

有些人可能会简单地用JavaScript解决:


代码如下:

<img src="image-url.png" onload="if(this.width > 100){this.width =  100;}if(this.height > 100){this.height = 100;}" />

但在这种写法在图片长宽差距较大时还是会出现图片变形的情况,优化了缩放算法的代码如下:


代码如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript实现图片等比缩放</title>
</head>
<body>
<script type="text/javascript">
function resize(element, maxWidth, maxHeight){
if(element.width > maxWidth || element.height > maxHeight){
if(element.width / element.height > maxWidth / maxHeight){
element.width = maxWidth;
}else{
element.height = maxHeight;
}
}
}
</script>
<img src="image-url.png" onload="resize(this, 100, 100);" />
</body>
</html>

而在不考虑IE6的情况下,可以直接使用CSS来实现,而且不需要使用低性能的CSS表达式:


代码如下:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>纯CSS无表达式实现图片等比缩放</title>
<style>
.box{
width: 300px;
height: 300px;
text-align: center;
border: 1px solid #ccc;
}
.box img{
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
</style>
</head>
<body>
<div><img src="image-url.png" alt=""></div>
</body>
</html>
 

 

示例代码如下
<script type="text/javascript">
function resize(element, maxWidth, maxHeight){
if(element.width > maxWidth || element.height > maxHeight){
if(element.width / element.height > maxWidth / maxHeight){
element.width = maxWidth;
}else{
element.height = maxHeight;
}
}
}
</script>
<style type="text/css">
    border:1px #CCCCCC solid;
    width:130px;
    height:130px;
    text-align:center;
    display:table-cell;
    vertical-align:middle;
</style>
<div>
<a href="#"><img src="图片地址" onload="resize(this, 130, 130);"/></a>
</div>

相关阅读

数据库操作工具类SqlHelp…

classSqlHelper{public$conn;public$host="local…

了解详情 >>

删除bom标签或者bom头的p…

有时程序的逻辑代码完全没有一问题,但是就是运行的时候出错,如果出现这种情况,那么有可能就是文件中包含…

了解详情 >>

专业的人干专业的事,切莫用ex…

专业的人干专业的"事",切莫用exit来干输出的事在程序测试的过程中为了图片方便…

了解详情 >>

ueditor与umedito…

ueditor的[1.4.3.3PHP版本]UTF-8版的存在的问题1:当编辑器还没有来得及提示“本…

了解详情 >>

过滤html标签与标签之间的空…

<?phpob_start();?><pid="name"&g…

了解详情 >>

如何修改文件默认打开方式为指定…

一:“开始菜单”,在里面点击右侧的“运行”选项,输入“regedit”命令,打开注册表修改默认的打开…

了解详情 >>

Copyright @ 2008-2019   www.sznest.net   All rights reserved  专注于免费建站,自助建站,模板建站,选免费模板免费送香港空间,选收费模板先建站后付款   粤ICP备11083046号       

微信

移动端

客服

顶部