CSS样式控制图片裁切显示

2016-02-19 18:32 27 1 收藏

下面这个CSS样式控制图片裁切显示教程由图老师小编精心推荐选出，过程简单易学超容易上手，喜欢就要赶紧get起来哦！

【 tulaoshi.com - Web开发】

　　我们在论坛新闻系统的时候，其中的有些图片会比较大破坏了整体布局的美观，现通过CSS定义方式使图片进行裁切显示，即，当图片的容器不足以显示整个图片时，会以左上角为开始显示，不足显示的将会隐藏。相关各位同仁也有此想法。现有以下CSS样式，所以贴出来同各位WEB 开发者共享！

　　当然有人用img 的onload 事件对其宽高进行js控制，不过经招有时会因网页加载过快，或过慢而来不及执行，现向大家推荐代码如下，自行研究。

html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
style type="text/css"
.divClass{height:100%;width:100%;overflow:hidden;Margin-bottom:5px}
/style
titleCOPY数据到ID群集中by ID | 图片CSS定义裁切显示| 文字的宽度自适应缩放/title
/head

body
div id="airzen" class="divClass"img src="http://pic.bobay.cn/Files/automm/2005-12/28/05122821154187236.jpg"/div
/body

　　说明：以上样式你可以自己定义，但要保留overflow:hidden;祝各位工作愉快！

来源:http://www.tulaoshi.com/n/20160219/1618085.html

上一篇：逐步讲解向Access数据库上传且显示图片
下一篇： CSS文本：layout-grid-type

看过《CSS样式控制图片裁切显示》的人还看了以下文章更多>>

用as来控制图片的曝光效果

标签： flash教程

制作方法：首先，我这里是建的场景大小是：550*400，然后找两副自己喜欢的图片（不喜欢也行），新建一元件，把其中一副图片居中放入第一桢，再把另一副图片居中放入第二桢，分别设置第一桢和第二桢上的动作为： stop() 好了，回到主场景中：将刚才建的元件拖入场景中居中放置，接着新建一层，时间桢上写入as: MovieClip.prototype.setBri...

CSS制作网页实例：用CSS控制li标记样式

标签： Web开发

网页里控制图片大小的相关代码

标签： Web开发

１、用鼠标拖动来改变大小 SCRIPT LANGUAGE="JavaScript" function resizeImage(evt,obj){ newX=evt.x newY=evt.y obj.width=newX obj.height=newY } /script img src="7say.gif" ondrag="resizeImage(event,this)" ２、用鼠标滚动控制图片大小 img src="7say.gif" onmouseenter="focus();" onmouseout="blur();" onmousewheel="width+=(windo...

Android中利用matrix 控制图片的旋转、缩放、移动

标签：编程语言网络编程

本文主要讲解利用android中Matrix控制图形的旋转缩放移动，具体参见一下代码：代码如下： /** * 使用矩阵控制图片移动、缩放、旋转 */ public class CommonImgEffectView extends View { private Context context ; private Bitmap mainBmp , controlBmp ; ...

用CSS使图片自适应显示宽度

标签： Web开发

公司的项目中需要显示由用户提供URI链接的图片，可是预先无法获知图片的尺寸大小，假如图片尺寸过大将会影响页面布局。最理想的解决方案自然是自动生成缩略图，涉及的后台工作较为复杂，用CSS进行控制是个能够接受的捷径。假如用width属性强行设定显示尺寸似乎太不智能。幸好Firefox/Opera/IE7都提供了max-width属性支持。假定...

查看更多精彩>>