(css3)用resize属性设计可以调整元素大小的图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>明镜止水</title>
<style type="text/css">
#resize {
/*以背景方式显示图像,这样可以更轻松地控制缩放操作*/
background: url(../images/罗马.jpg) no-repeat center;
/*设计背景图像仅在内容区域显示,留出补白区域*/
-webkit-background-clip: content;
background-clip: content;
/*设计元素最小和最大显示尺寸,用户也只能够在该范围内*调整*/
width: 200px;
height: 200px;
max-width: 800px;
max-height: 800px;
padding: 6px;
border: 1px solid red;
/*必须同时定义overflow和resize,否则resize属性声明无效,元素默认溢出显示为visible*/
resize:both;
overflow: auto;
}
</style>
</head>
<body>
<div id="resize">
</div>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>明镜止水</title>
<style type="text/css">
#resize {
/*以背景方式显示图像,这样可以更轻松地控制缩放操作*/
background: url(../images/罗马.jpg) no-repeat center;
/*设计背景图像仅在内容区域显示,留出补白区域*/
-webkit-background-clip: content;
background-clip: content;
/*设计元素最小和最大显示尺寸,用户也只能够在该范围内*调整*/
width: 200px;
height: 200px;
max-width: 800px;
max-height: 800px;
padding: 6px;
border: 1px solid red;
/*必须同时定义overflow和resize,否则resize属性声明无效,元素默认溢出显示为visible*/
resize:both;
overflow: auto;
}
</style>
</head>
<body>
<div id="resize">
</div>
</body>
</html>
注意:目前仅有Safari和Chrome浏览器允许元素缩放,但是没有完全支持,本例子为双向调整(both)