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

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

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

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

<!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="http://cdn.guzhangv.com/wp-content/uploads/2017/04/20170429234817179.png" /> 
</div> 

<div class="divcss8"> 
<img src="http://cdn.guzhangv.com/wp-content/uploads/2017/04/wKgBZ1i-VaWATZnSAA7LgYHMfi817.jpeg" /> 
</div> 

</body> 
</html> 

The end!

历史的今天:

赞 赏

    推 荐 阅 读

  • 让文章目录插件wp-toc在侧边栏显示

    在文章页面增加文章目录有利于SEO,大大降低了网站美观,像我这种有强迫症的人,最好是鱼和熊掌兼得,必须尽其所能做到美观和功能兼顾的局面(当然是在自己能力范围内哈),像本...

    让文章目录插件wp-toc在侧边栏显示
  • 自定义个性化文章形式

    添加内置文章形式(post-formats),列表循环不同的文章形式。   第一步 打开wp-includes/文件夹里的post-formats.php文件,添加需要增加的样式名称,   第二步 将add_...

    自定义个性化文章形式
  • 给云存储绑定自定义域名

    上一篇文章给网站开启CDN加速和云存储!简单介绍了CDN加速和云存储,本文着重介绍一下给云存储绑定自定义域名之后的加速和浏览器在线打开图片的设置。 当使用腾讯云存储对象V4创...

    给云存储绑定自定义域名
  • 用is_mobile()函数判断手机设备wordpress

    为了使得手机端和PC端显示不一样的内容字数,用了<?php if (is_mobile() ): ?>、<?php endif ;?>来判断,不过在此之前需要在 functions.php 内添加如下代码才能有效...

    用is_mobile()函数判断手机设备wordpress
  • 给网站开启CDN加速和云存储!

    什么是CDN加速 相信很多站长朋友都在用wp-super-cache这款插件给自己的网站开启静态加速,它的原理是通过把网站生成静态页面缓存到本地,让访客直接浏览的是这个文件,而不需要...

    给网站开启CDN加速和云存储!