前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定;由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示
废话不多说,直接上代码
html
<ul>
<li>
<img src="pics/1.jpg" alt=""/>
</li>
<li>
<img src="pics/2.jpg" alt=""/>
</li>
</ul>
css
*{padding:0px;margin:0px;list-style: none;}
a img{border:;}
li{
position: relative;
left:100px;
top:100px;
width:300px;
height:200px;
border: solid 1px red;
overflow: hidden;
}
img{
position: absolute;
margin: auto;
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
max-width:100%;
max-height:100%
} 结果
尺寸不固定的图片在div中垂直居中并完全显示的更多相关文章
-
CSS-布局【1】-图片在div中垂直居中
方法一:通过增加100%高度行内块居中对齐 <!DOCTYPE html> <html> <head> <meta name="viewport&q ...
-
让图片在DIV中垂直居中
window.onload=function(){ var img = document.getElementById("imgdiv"); var div = document. ...
-
单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中
单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中 <div class="ServicesLiTopPic"> <i>&l ...
-
设置span在div中垂直居中
转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居 ...
-
未知行数的文字在div中垂直居中
今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...
-
如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)
写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签 text-overflow , ...
-
让图片在div 中居中的方法
方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt ...
-
html 图片在一个div中放大缩小效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
-
让一个图片在div中居中(四种方法)
第一种方法: <div class="title"> <div class="flag"></div> <div cl ...
随机推荐
-
iOS开发UI篇—Quartz2D简单介绍
iOS开发UI篇—Quartz2D简单介绍 一.什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\ ...
-
Greedy:Protecting the Flowers(POJ 3262)
保护花朵 题目大意:就是农夫有很多头牛在践踏花朵,这些牛每分钟破坏D朵花,农夫需要把这些牛一只一只运回去,这些牛各自离牛棚都有T的路程(有往返,而且往返的时候这只牛不会再破坏花),问怎么运才能使被践踏 ...
-
ionice
ionice – 获取或设置程序的IO调度与优先级. 命令格式: ionice [[-c class] [-n classdata] [-t]] -p PID [PID]… ionice [-c cl ...
-
Django – vicalloy's trac
Django – vicalloy's trac Search:
-
Valgrind简介:
Valgrind是动态分析工具的框架.有很多Valgrind工具可以自动的检测许多内存管理和多进程/线程的bugs,在细节上剖析你的程序.你也可以利用Valgrind框架来实现自己的工具. Valgr ...
-
将TinyXml快速入门的接口面向对象化(转载)
作者:朱金灿 来源:http://www.cnblogs.com/clever101 在TinyXml快速入门的系列文章中(详情见本博客),我只是将tinyxml类库解析xml文件的类封装为API接口 ...
-
微信小程序image bindload事件失效不触发
1.先上代码 <template> <div :class="['img-wrapper', className]"> <img :src=" ...
-
SQL Server如何用SQL实现一批字符串的全部组合
在SQL Server中,如何用SQL去实现得到一批字符串的全部组合呢?这个是同事在实际需求当中遇到的一个问题,他的具体需求如下所示: 传入参数格式为'1,2,3,224,15,6' 'A,BC, ...
-
蓝桥杯_算法训练_区间k大数查询
问题描述 给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个. 输入格式 第一行包含一个数n,表示序列长度. 第二行包含n个正整数,表示给定的序列. 第三个包含一个正整数m,表示询问个数 ...
-
Kettle性能调优汇总
性能调优在整个工程中是非常重要的,也是非常有必要的.但有的时候我们往往都不知道如何对性能进行调优.其实性能调优主要分两个方面:一方面是硬件调优,一方面是软件调优.本章主要是介绍Kettle的性能优 ...