JS+CSS设置img在DIV中只显示Img垂直居中的部分

一个Div中显示Img，img的宽和Div相同，但高不固定，要求只显示Img垂直居中的部分。

示例：

原图：

代码实现：


代码如下:

<div style="width: 190px; height: 100px; overflow: hidden;">
<img src="http://beijing.timeoutcn.com/UserFiles/Images/2013-10-21/20131021104840077cover-22-1.jpg" width="190px" style="vertical-align: middle;"
onload="this.style.marginTop = (parseInt(this.parentNode.style.height) - this.height)/2 + 'px';this.style.marginLeft = (parseInt(this.parentNode.style.width) - this.width) /2 + 'px'" />
</div>

点击下载源文件

赞 (0)

相关推荐

  • JS对img进行操作(换图片/切图/轮换/停止)

    复制代码 代码如下: <script type="text/javascript"> var i = 1; var n; function showImg() { if (document.getElementById('img').getAttribute("src") == "images/1.jpg") { document.getElementById('img').setAttribute("src",&

  • javascript动态生成树形菜单的方法

    本文实例讲述了javascript动态生成树形菜单的方法.分享给大家供大家参考,具体如下: //======================================== //Envrionment to hold Listeners //======================================== tv_listeners = new Array() ; function listener( type , handler ) { this.type = type ;

  • JSP实现用于自动生成表单标签html代码的自定义表单标签

    本文实例讲述了JSP实现用于自动生成表单标签html代码的自定义表单标签.分享给大家供大家参考.具体如下: 这个是自己写的一个简单的JSP表单标签,用于自动生成checkbox,select,radio等标签,传入菜单集合生成html代码,自动选中指定值,用于java web项目的jsp页面. 1. Servlet部分代码: Map<String, String> map = new HashMap<String, String>(); map.put("2",

  • JS+JSP通过img标签调用实现静态页面访问次数统计的方法

    本文实例讲述了JS+JSP通过img标签调用实现静态页面访问次数统计的方法.分享给大家供大家参考,具体如下: 测试页面: test.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test</title> <meta http-equiv="pragma" content

  • JSP结合js实现img中src更新请求的方法

    本文实例讲述了JSP结合js实现img中src更新请求的方法.分享给大家供大家参考.具体如下: 1.javascript(更新的函数) <script type="text/javascript"> function changeImage(){ var img = document.getElementById("imgVcode"); if(img.name == 1){ img.name = 2; img.src = "shop.do?m

  • javascript修改IMG标签的src问题

    1.当点击某一按钮的时候,把图片域中的图片改变一下 复制代码 代码如下: <img id="randimg" src="/servlet/CreateValidateNum" width="60" height="20" /> <span style="cursor:hand" onclick="reflush();return false;">看不清</s

  • js生成随机数的方法实例

    js生成随机数主要用到了内置的Math对象的random()方法.用法如:Math.random().它返回的是一个 0 ~ 1 之间的随机数.有了这么一个方法,那生成任意随机数就好理解了.比如实际中我们可能会有如下的需要: (1)生成一个 0 - 100 之间的随机整数,那么则可以: parseInt(100*Math.random()); 注意:因为Math.random()的返回值是包括0和1的,所以这里是有生成0和100的可能性的. (2)生成一个从 m - n 之间的随机整数,例如要生

  • JavaScript实现自动生成网页元素功能（按钮、文本等）

    JavaScript实现自动生成网页元素功能（按钮、文本等）

    创建元素的方法: 1.利用createTextNode()创建一个文本对象 2.利用createElement()创建一个标签对象 3.直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的"html代码",不是我们认为的对象树的操作 详解代码: <body> <input type="button" value="创建并添加节点1" onclick="addNode1()"/>

  • javascript生成img标签的3种实现方法(对象、方法、html)

    本文实例讲述了javascript生成img标签的3种实现方法.分享给大家供大家参考,具体如下: <div id="d1"></div> <script> //HTML function a(){ document.getElementById("d1").innerHTML="<img src='http://baike.baidu.com/cms/rc/240x112dierzhou.jpg'>"

  • JS+CSS设置img在DIV中只显示Img垂直居中的部分

    JS+CSS设置img在DIV中只显示Img垂直居中的部分

    一个Div中显示Img,img的宽和Div相同,但高不固定,要求只显示Img垂直居中的部分. 示例: 原图: 代码实现: 复制代码 代码如下: <div style="width: 190px; height: 100px; overflow: hidden;"> <img src="http://beijing.timeoutcn.com/UserFiles/Images/2013-10-21/20131021104840077cover-22-1.jpg

  • JS在可编辑的div中的光标位置插入内容的方法

    本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式 复制代码 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置

  • JS+CSS实现带关闭按钮DIV弹出窗口的方法

    本文实例讲述了JS+CSS实现带关闭按钮DIV弹出窗口的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS实现带关闭按钮的DIV弹出窗口</title> <script>     function locking(){      document.all.ly.style.display="block";      document.all.ly.sty

  • js如何设置在iframe框架中指定div不显示

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>测试</title> <script language="javascript" type="text/javascript"> function getStyle() { if (window.to

  • JS+CSS实现网页加载中的动画效果

    JS+CSS实现网页加载中的动画效果

    本文实例为大家分享了JS实现网页加载中效果的具体代码,供大家参考,具体内容如下 需要材料: 一张loading动画的gif图片 基本逻辑: 模态框遮罩 + loading.gif动图, 默认隐藏模态框 页面开始发送Ajax请求数据时,显示模态框 请求完成,隐藏模态框 下面我们通过Django新建一个web应用,来简单实践下 实践 1.新建一个Django项目,创建应用app01, 配置好路由和static,略.将gif动图放到静态文件夹下,结构如下: 2.视图中定义一个函数,它返回页面test.

  • js使用循环清空某个div中的input标签值

    HTML页面 <div class="col-xs-9" id="search_songs_a"> <table> <tbody> <tr> <th>钢琴曲名称:</th> <td><input type="text" name="info[gqq_name]" id="gqq_name" style="wi

  • 解决vue 中 echart 在子组件中只显示一次的问题

    问题描述 一次项目开发过程中,需要做一些图表,用的是百度开源的 echarts. vue推荐组件化开发,所以就把每个图表封装成子组件,然后在需要用到该图表的父组件中直接使用. 实际开发中,数据肯定都是异步获取的.所以我们在 mounted 生命周期中获取数据.对vue生命周期不熟悉的,可以去看一下我之前写一篇文章vue2.0项目实战(4)生命周期和钩子函数详解 由于父组件请求的数据并不是一成不变的,会根据不同的条件请求不同的数据,此时需要图表进行更新. 代码示例 在父组件中 // Main.vu

  • JS实现读取xml内容并输出到div中的方法示例

    JS实现读取xml内容并输出到div中的方法示例

    本文实例讲述了JS实现读取xml内容并输出到div中的方法.分享给大家供大家参考,具体如下: note.xml文件结构: <nooo> <note> <to>George</to> <from>John</from> <heading>Reminder</heading> <body>Don't forget the meeting!</body> </note> <n

  • Jsp中如何让图片在div中居中

    Jsp中如何让图片在div中居中

    jsp中让图片在div中居中显示,如上图 例子: 复制代码 代码如下: //CSS文件 <style type="text/css"> #bj{ width:200px; height:200px; border:3px solid red; text-align:center; vertical-align:middle; display:table-cell; //将对象作为表格单元格显示 background:pink; } img{ width:150px; hei

  • 易语言设置在驱动器框中显示指定的驱动器类型

    易语言设置在驱动器框中显示指定的驱动器类型

    类型属性 所属对象:驱动器框   操作系统支持:Windows ,数据类型:整数型: 将整数型数据赋值到指定对象的类型属性中 语法:对象.类型 = 整数型 应用对象:驱动器框 可供选择的属性值: 0.全部驱动器 1.可抽取式驱动器 2.固定驱动器 3.光盘驱动器 4.网络驱动器 5.内存虚拟驱动器 例程 说明: 本属性设置在驱动器框中所显示的驱动器类型.类型1为软盘驱动器,类型2为硬盘驱动器,类型3为光盘驱动器,类型4为网络驱动器,即主机带若干子机的形式,类型5为内存虚拟驱动器,即在内存中建立的

随机推荐