纯CSS无表述式完成未知规格照片等比放缩(适用

日期:2021-01-20 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

在制做网页页面的情况下,经常会遇到1种状况,大家必须把1些未知规格的照片放在1个固定不动宽高的器皿中,这时候候大家必须考虑到这样的难题:

只给照片设定宽度或高宽比的在其中1项能够完成照片等比放缩,但照片将会超过器皿尺寸。
给照片设定固定不动的宽高将会致使照片形变。

一些人将会会简易地用JavaScript处理:

拷贝编码
编码以下:

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

但在这类写法在照片长宽差别较大时還是会出現照片形变的状况,提升了放缩优化算法的编码以下:

拷贝编码
编码以下:

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF⑻">
<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 lang="zh-CN">
<head>
<meta charset="UTF⑻">
<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 class="box"><img src="image-url.png" alt=""></div>
</body>
</html>
上一篇:css画太极图(阴阳8卦) 返回下一篇:没有了