用min-width/max-width实现图片缩放裁切

<!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 content="text/html; charset=gbk" http-equiv="Content-Type" />
<title>min-width/max-width控制图片缩放裁切</title>
<style type="text/css">
img{border:none;display:block;}
div
{
  margin:20px auto;
  background-color:#f0f6f9;
  border:1px solid #606669;  
}
#div1
{
  width:150px;
  height:200px;
  overflow:hidden;  
}
#div1 img
{
  min-width:150px;
  min-height:200px;    
}
</style>
</head>

<body>
  <div id="div1">
    <a href="#"><img src="test.jpg" alt="" /></a>
  </div>
</body>

</html>

你可能感兴趣的:(css,max-width,min-width,裁切,图片缩放变形)