如何让图片在div里面剧中显示

时间:2022-09-17 19:28:12

你可能有很多种方式,但是这种方式我觉得更加简单,供大家参考。

用一个 display:inline-block 的helper容器高度为height: 100% 并且vertical-align: middle 在Img的旁边就能实现。

<style>
.frame {
height: 55px;
/* equals max image height */
width: 160px;
border: 1px solid red; }
.helper {
display: inline-block;
height: 100%;
vertical-align: middle; }
img {
background: #3A6F9A;
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
</style>
<div class=frame>
<img src="http://jsfiddle.net/img/logo.png" height=250 /><div class="helper"></div>
</div>

How it works:

  1. When you have two inline-block elements near each other, you can align each to other's side, so with vertical-align: middle you'll get something like this:

    如何让图片在div里面剧中显示

  2. When you have a block with fixed height (in px, em or other absolute unit), you can set the height of inner blocks in %.

  3. So, adding one inline-block with height: 100% in a block with fixed height would align another inline-block element in it (<img/> in your case) vertically near it.

如何让图片在div里面剧中显示的更多相关文章

  1. 尺寸不固定的图片在div中垂直居中并完全显示

    前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定:由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示 废话不多说,直接上代码 html <ul ...

  2. 图片大于div时的居中显示

    当图片大于div时,想要图片居中显示,如果图片等比例缩小可能会导致图片不能填充整个div,如果直接将图片不设置宽高,将其外层div设置overflow:hidden:这时即使外层div设置了水平垂直居 ...

  3. 图片溢出div问题的最终解决方案

    2016.11.20备注: 此问题通过css的max-width:100%;即可解决. 前两天编写了一个前端页面,在本机上显示一切正常.不过在不断的测试中,发现了一个严重的问题,如果图片过大,会撑破d ...

  4. jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

    1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...

  5. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  6. lufylegend&colon;图片的加载和显示

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <script ...

  7. 几行简单代码实现DIV层上显示Tooltip效果

    最近在做一个项目,要在鼠标移到层上后显示出tip提示,网上找了半天,都很麻烦,就自己修改了一个,记录在下面 测试在IE 7.8.9及 chrome 上没问题. <HTML> <HEA ...

  8. ActiveReport 同一单元格内图片跟文字按条件显示

    ActiveReports支持提供Image控件来显示图片素材,Image控件的值可以为图像的二进制流,图像路径,或url等:而在很多情况下,图片是签名扫描文件,并不会一直有值.如果图片的值为空,则显 ...

  9. 如何在一个div标签里显示出另一个网页? &lt&semi;iframe src&equals;&quot&semi; http&colon;&sol;&sol;www&period;baidu&period;com &quot&semi; width&equals;&quot&semi;800px&quot&semi; height&equals;&quot&semi;200px&quot&semi; scrolling&equals;&quot&semi;no&quot&semi; frameborder&equals;&quot&semi;0&quot&semi;&gt&semi; &lt&semi;&sol;iframe&gt&semi;

    如何在一个div标签里显示出另一个网页? 用在div里用iframe,就像下面的代码 <iframe src=" http://www.baidu.com " width=& ...

随机推荐

  1. UVA-11297 Census(线段树套线段树)

    题目大意:二维空间点修改,询问矩形区域最值. 题目分析:还是比较简单的. 代码如下: # include<iostream> # include<cstdio> # inclu ...

  2. ADO &period;NET 链接 增删改查

    ADO.NET: 数据访问技术 就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中也可以将数据库中的数据提取到内存*程序调用 所有数据访问技术的基础 连 ...

  3. Merge into 使用

    在进行SQL语句编写时,我们经常会遇到这样的问题:当存在记录时,就更新(Update),不存在数据时,就插入(Insert),oracle为我们提供了一种解决方法——Merge into ,具体语法如 ...

  4. hibernate之saveorupdate&lpar;&rpar;、save&lpar;&rpar;、update&lpar;&rpar;都有什么区别

    saveorupdate()如果传入的对象在数据库中有就做update操作,如果没有就做save操作. save()在数据库中生成一条记录,如果数据库中有,会报错说有重复的记录. update()就是 ...

  5. Android ScrollView&plus;ViewPager&plus;PullToRefreshListView

    想达到此界面的风格 然后ViewPage里面第一个Fragment是一个瀑布流 这个瀑布流要有加载跟多 在ScrollView中,嵌套ViewPager,在ViewPager的每页使用Fragment ...

  6. Monkey and Banana(HDU 1069 动态规划)

    Monkey and Banana Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  7. 【C语言】两种方式实现冒泡排序算法

    题目要求 编写一个C语言程序,实现基本的冒泡排序算法. 算法 冒泡排序,用一句话来总结: 一组数中,相邻的两个数进行比较.交换,将最大(小)数交换至尾(首)部,即完成了一次冒泡排序 要想对N个数字进行 ...

  8. Spring bean中的properties元素内的name 和 ref都代表什么意思啊?

    <bean id="userAction" class="com.neusoft.gmsbs.gms.user.action.UserAction" sc ...

  9. HTML基础-------HTML标签&lpar;2&rpar;

    HTML标签(2) a标签(容器级单标签) 语义:跳转到指定的连接 属性 列表系列 1.无序列表 该列表由两部分组成:ul标签嵌套li标签(ul标签是典型的容器级标签) 图示: 2.有序列表 该列表由 ...

  10. Pull is not possible because you have unmerged files

    Pull is not possible because you have unmerged files.   在git pull的过程中,如果有冲突,那么除了冲突的文件之外,其它的文件都会做为sta ...