不变形原比例缩放图片代码

2017/05/13

自己整理了几种图片展示的方法，实现图片原比例缩小、放大、不失真、不变形，先来看看实例图：

以下是对应的各种样式的代码。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>图片缩小不变形实例 www.divcss5.com</title> 
<style>
.divcss5{ margin:20px;border:1px solid #000; width:100px; height:100px;overflow:hidden;} 
.divcss5 img{width:auto;}/*图片不缩小,原图*/

.divcss6{ margin:20px;border:1px solid #000; width:100px; height:100px;overflow:hidden;} 
.divcss6 img{width:100%;} /*图片自动等比例缩小到和框的宽度一样宽,缺点是无法填满框框*/

.divcss7{ margin:20px;border:1px solid #000; width:100px; height:100px;overflow:hidden;} 
.divcss7 img{width:200px;height:100px;} 

.divcss8{ margin:20px;border:1px solid #000; width:300px; height:200px;overflow:hidden;} 
.divcss8 img{width:120%;margin-left:-10%;margin-top:-10%;}/*图片相对DIV层放大到120%,再显示图片中间部分*/
</style> 
</head> 
 
<body> 

<div class="divcss5"> 
<img src="http://www.divcss5.com/uploads/allimg/1310/1_131023133621_1.png?_=4854666" /> 
</div>
<p></p>
<div class="divcss6"> 
<img src="http://www.divcss5.com/uploads/allimg/1310/1_131023133621_1.png?_=4854666" /> 
</div>

<div class="divcss7"> 
<img src="http://www.divcss5.com/uploads/allimg/1310/1_131023133621_1.png?_=4854666" /> 
</div> 

<div class="divcss8"> 
<img src="http://www.divcss5.com/uploads/allimg/1310/1_131023133621_1.png?_=4854666" /> 
</div> 

<div class="divcss8"> 
<img src="https://wwwguzhangvcom-1253552504.file.myqcloud.com/wp-content/uploads/2017/04/20170429234817179.png" /> 
</div> 

<div class="divcss8"> 
<img src="https://wwwguzhangvcom-1253552504.file.myqcloud.com/wp-content/uploads/2017/04/wKgBZ1i-VaWATZnSAA7LgYHMfi817.jpeg" /> 
</div> 

</body> 
</html>