html 图片的缩略图,纯CSS制作缩略图片
在这篇教程中,主要是跟着Alen Grakalic学习3种CSS制作缩略图的方法。我们在Web页面中时常碰到缩略图的应用,那么下面我将学习三种使用CSS的技巧来主内容显示图像的一部分。这几种技巧贵在于,我们不需要去切图片,而只要使用CSS代码,能帮我们在页面中显示我们需要显示的部分图像出来,而图像的其他部分将被隐藏起来。
另外需要提醒大家的是,我们这里所说的图片是指内容图像()而不是背景图片,下面我们一起来学习一下如何通过简单的CSS技巧,达到切图的效果。
方法一:利用margin的负值
使用这种方法,我们将图片放在一个“
”元素中,然后对这个元素进行池动或者设置一定的大小,因为全宽的块元素,使用这种技巧是无法实现的。然后,我们在图片“”上同时设置“top、right、bottom、left”的负值 “margin”,这四个值是用来定义图像只显示哪一部分出来,当然设置好了这个几值,还有一个关键值要在图片的父元素中设置——overflow:hidden这个属性 起的作用是将图像的其他部分隐藏起来。下面我们一起来看一个图,他能告诉你如何来定“”上的“margin负值”:
我们来看代码:
HTML Markup
CSS Code
.crop-technique1 {
float: left;
margin: 0.5em 10px 0.5em 0;
overflow: hidden;/*this is important*/
border: 1px solid #ccc;
}
/*input values to crop the image: top right bottom left*/
.crop-technique1 img {
margin: -20px -15px -40px -55px;
}
方法二、使用绝对定位
如果你觉得第一种方法不太好用,而且很不喜欢,那么你可以尝试使用这种绝对定位的方法。同样我们需要在图片外面加一个外标签,然后要设置这个外标签的大小,其大小刚好是你需要显示图像的大小,并且加设一个相对定位“position:relative”,接下来你在把img进行绝对定位,并且定位好起点,同样大家来看一张图,帮助大家更好的理解:
看代码:
HTML Markup
CSS Code
.crop-technique2 {
float: left;
margin: 0.5em 10px 0.5em 0;
overflow: hidden;/*this is important*/
position: relative;/*this is important*/
border: 1px solid #ccc;
width: 150px;
height: 90px;
}
.crop-technique2 img {
position: absolute;/*this is important*/
top: -20px;
left: -55px;
}
查看DEMO效果。
方法三、使用clip切图
这种方法是使用clip的剪辑图片,因为clip必须运用在绝对定位的元素上,为了保证文档流的正常,我们同样需要在“img”外包一层标签,然后设计其剪辑图片的大小。这样相对来说就复杂一些了,不过也可以学习一下,下面我们依旧来看一张图:
看代码:
HTML Markup
CSS Code
.crop-technique3 {
float: left;
position: relative;/*this is important*/
margin: 0.5em 10px 0.5em 0;
border: 1px solid #ccc;
width: 150px;
height: 90px;
}
.crop-technique3 img {
margin: 0;
position: absolute;
top: -20px;
left: -55px;
clip: rect(20px 205px 110px 55px);
}
查看在线的DEMO。
上面我们一起见证了三种不同的技巧来实现图片的缩略效果。你会发现上面三种技巧虽然不同的方法,但最终的效果是一样的。这再次证明了,在Web制作中,同一种效果有多种不同的方法实现,只要你开动大脑,寻找最适合的一种方法。如果你问我会喜欢哪一种,我会选择第一种方法,因为他简单易懂,只需要计算出其margin值就OK了。最后在结束之前,再次感谢Alen Grakalic给我们带来这么好的教程,如果你想了解的更详细,可以点击Alen Grakalic写的《3 Easy and Fast CSS Techniques for Faux Image Cropping》。希望大家喜欢这篇文章,如果你有什么更好的处理方法,可以直接在评论中给我留言。
如需转载烦请注明出处:
html 图片的缩略图,纯CSS制作缩略图片相关推荐
- 纯css制作遮罩层特效
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做.下面是用纯css制作的遮罩层效果: 原始页面,放了三张图片: ...
- 纯CSS无表达式实现图片等比缩放(支持IE7及以上)
在制作网页的时候,常常会遇到一种情况,我们需要把一些未知尺寸的图片放在一个固定宽高的容器中,这时候我们需要考虑这样的问题: 只给图片设置宽度或高度的其中一项可以实现图片等比缩放,但图片可能超出容器大小 ...
- 纯CSS制作的图形效果
纯CSS制作的图形效果 很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
- html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
- 纯Css制作tab选项卡
Css本身的功能就很强大的,尤其是Css3出来之后,大部分特效只用Css3就能完成了,无需再费心思去研究js.jQuery该怎么怎么去写,代码简洁方便.下面这个是用纯Css制作的tab选项卡效果: 用 ...
- css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- 【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 纯CSS的实现仿图片相册浏览模式代码
演示下载 查看演示 立刻下载 本文标题: 纯CSS的实现仿图片相册浏览模式代码 固定链接: http://www.tcode.me/article/1215.html 来自淘代码转载请注明
- 纯CSS制作自适应分页条-分享------彭记(019)
纯css制作自适应分页条 效果图: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
最新文章
- 计算机起源于发展论文,关于计算机起源及发展的论文1500字左右,论文形式.
- 《卓有成效的管理者》——读书笔记
- jsp中jsp中群发邮件群发邮件
- python基础教程:对可变对象和不可变对象的详解
- Springboot2.x +JPA 集成 Apache ShardingSphere 分库分表
- (c语言)输出1到100之间的所有素数
- mysql显示表已存在_「Docker系列」 如何在Docker中部署MySQL数据库?
- android开关控件Switch和ToggleButton
- 在Makefile中进行宏定义-D
- Jenkins添加注册用户默认权限/Add a default authenticated user role
- git学习笔记(2-git初始化配置)
- 为什么视锥剔除重要,却又不重要 | Why Frustum Culling Matters, and Why It‘s Not Important
- 初中计算机vb教程视频教程,关于中学信息技术vb的教学
- Fashion-MNIST分类(pytorch实现)
- Oracle读取数据库中表填充,Oracle数据库中查看所有表和字段以及表注释.字段注释...
- plsql导入excel时无odbc importer中无dsn选项
- VSCode代码格式化快捷键及保存时自动格式化
- 从家里到阿里,学弟求职的一年
- Google 2018年Android平台新政策,终于强硬了一回!
- WIN10 未安装任何音频驱动 扬声器有个小红叉(已解决)