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

时间:2021-06-17 23:16:25

前几天做一个项目,需要批量上传图片,图片外侧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中垂直居中并完全显示

尺寸不固定的图片在div中垂直居中并完全显示的更多相关文章

  1. CSS-布局【1】-图片在div中垂直居中

    方法一:通过增加100%高度行内块居中对齐 <!DOCTYPE html> <html> <head> <meta name="viewport&q ...

  2. 让图片在DIV中垂直居中

    window.onload=function(){ var img = document.getElementById("imgdiv"); var div = document. ...

  3. 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

    单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中   <div class="ServicesLiTopPic"> <i>&l ...

  4. 设置span在div中垂直居中

    转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居 ...

  5. 未知行数的文字在div中垂直居中

    今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...

  6. 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

  7. 让图片在div 中居中的方法

    方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt ...

  8. html 图片在一个div中放大缩小效果

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  9. 让一个图片在div中居中(四种方法)

    第一种方法: <div class="title"> <div class="flag"></div> <div cl ...

随机推荐

  1. iOS开发UI篇—Quartz2D简单介绍

    iOS开发UI篇—Quartz2D简单介绍 一.什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\ ...

  2. Greedy&colon;Protecting the Flowers&lpar;POJ 3262&rpar;

    保护花朵 题目大意:就是农夫有很多头牛在践踏花朵,这些牛每分钟破坏D朵花,农夫需要把这些牛一只一只运回去,这些牛各自离牛棚都有T的路程(有往返,而且往返的时候这只牛不会再破坏花),问怎么运才能使被践踏 ...

  3. ionice

    ionice – 获取或设置程序的IO调度与优先级. 命令格式: ionice [[-c class] [-n classdata] [-t]] -p PID [PID]… ionice [-c cl ...

  4. Django – vicalloy's trac

    Django – vicalloy's trac Search:

  5. Valgrind简介:

    Valgrind是动态分析工具的框架.有很多Valgrind工具可以自动的检测许多内存管理和多进程/线程的bugs,在细节上剖析你的程序.你也可以利用Valgrind框架来实现自己的工具. Valgr ...

  6. 将TinyXml快速入门的接口面向对象化(转载)

    作者:朱金灿 来源:http://www.cnblogs.com/clever101 在TinyXml快速入门的系列文章中(详情见本博客),我只是将tinyxml类库解析xml文件的类封装为API接口 ...

  7. 微信小程序image bindload事件失效不触发

    1.先上代码 <template> <div :class="['img-wrapper', className]"> <img :src=&quot ...

  8. SQL Server如何用SQL实现一批字符串的全部组合

    在SQL Server中,如何用SQL去实现得到一批字符串的全部组合呢?这个是同事在实际需求当中遇到的一个问题,他的具体需求如下所示: 传入参数格式为'1,2,3,224,15,6'   'A,BC, ...

  9. 蓝桥杯&lowbar;算法训练&lowbar;区间k大数查询

    问题描述 给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个. 输入格式 第一行包含一个数n,表示序列长度. 第二行包含n个正整数,表示给定的序列. 第三个包含一个正整数m,表示询问个数 ...

  10. Kettle性能调优汇总

      性能调优在整个工程中是非常重要的,也是非常有必要的.但有的时候我们往往都不知道如何对性能进行调优.其实性能调优主要分两个方面:一方面是硬件调优,一方面是软件调优.本章主要是介绍Kettle的性能优 ...