本文将通过代码实例详细介绍一下如何实现图片等比例缩放裁切效果。
图片有两种应用方式,一种作为子元素存在,一种是作为背景图片。
在每一种应用方式中,图片的等比例缩放又可以大致分为如下几种情况:
(1).确保图片能够填充满元素,超出的部分被裁切或者隐藏。
(2).确保图片的长或者宽填充满元素,超出的部分被裁切或者隐藏。
下面通过代码实例分别介绍一下上述列举的中可能,需要的朋友可以做一下参考。
一.作为背景图片:
通过CSS的background-image属性可以设置元素的背景图片效果。
下面就以如下图片进行相关演示:
上述图片的尺寸是350*262,下面首先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>background-clip属性-web前端开发学习扣qun:767273102 详细教程分享</title>
<style type="text/css">
div{
border:10px solid green;
width:250px;
height:180px;
}
.bg{
background-image:url(mytest/demo/small.jpg);
background-repeat:no-repeat
}
</style>
</head>
<body>
<div class="bg"></div>
</body>
</html>
background-image属性设置元素背景图片,无法设置背景图片的缩放效果。
只能是原生态,顶多调整一下背景图片的位置,或者是否重复。
CSS3新增background-size属性