原文地址:http://www.cnblogs.com/JimmyBright/p/7681089.html

经常需要在一个长宽固定的div里存放一个图片,这个图片长宽未知,所以需要图片自适应div显示

 .imgBox img {
max-width: 100%;
max-height: 100%;
/* min-width: 195px; */
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
imgBox 是一个长宽固定的div,如下样式
 .imgBox {
/* width: 195px;
height: 195px; */
background: transparent;
position: relative;
left:;
top:;
border: 1px solid rgba(0, 0, 0, 0.2);
}

简易处理图片在div中居中铺满的更多相关文章

  1. 如何使一个div能够铺满整个页面? && 模态框的制作 && outerHTML

    说明: 使用 ele.outerHTML = '' 这样的方法可以很容易的清除一个元素. 当然也可以使用parent.removeChild() ,但是相较而言,还是使用 outerHTML = '' ...

  2. 转载 html div三列布局占满全屏(左右两列定宽或者百分比、中间自动适应,div在父div中居底)

    原文地址:http://blog.csdn.net/duyelang/article/details/20558899 <p><!DOCTYPE html> <html ...

  3. 如何将div高度填满剩余高度

    下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body">     <div id="navbar ...

  4. 实现左边div固定宽度,右边div自适应撑满剩下的宽度的布局方式:

    html: <div class="container"> <div class="left"> left固定宽度200px </ ...

  5. 两个DIV,左DIV宽度固定,右DIV自动填满剩余空间

    <style type="text/css"> #main{ width:98%; } #sidebar{ float:left; width:200px; backg ...

  6. css实现左边div固定宽度,右边div自适应撑满剩下的宽度

    (1)使用float <div class="use-float"> <div></div> <div></div> & ...

  7. 左边div固定宽度,右边div自适应撑满剩下的宽度--实现方法汇总

    神奇的事 其实有的方法(float.position.margin.flex)是有border像素的差 代码如下: <!DOCTYPE html><html><head ...

  8. 控制DIV占满屏幕

    网上找了很多帖子,希望是CSS控制的,但是在bootstrap环境下, 控制方式上有点问题.达不到想要的效果. 项目中需要实现的效果: DIV区域占满当前窗口的高度.且在ctrl+鼠标滚轮调整窗口大小 ...

  9. JS组件系列——图片切换特效:简易抽奖系统

    前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的“SlotMachine组件”,浏览一遍下来,勾起了博主小时候满满的回忆.于是下定决定要研究下这么一个东西,不得不再次叹息开源社区的强大,原来 ...

随机推荐

  1. WCF来传递DataTable的Bug

    Wcf,客户端与服务器之间在传递DataTable(由于数据库字段不确定暂时用DataTable而不是用实体对象传递)时,发现有的DataTable可以直接传递没有问题 解决方案: DataTable ...

  2. ss客户端的使用

    这里假设读者已经搭建了ss服务.教程 客户端安装 客户端可以通过GitHub上搜索,这里就不写太详细了,避免文章被禁掉. 比如对于mac的用户,可以选择这个 客户端配置 点击程序图标以展开菜单栏 服务 ...

  3. NanoPC-T2制作刷机包

    anoPC-T2制作刷机包 前提:到友善的wiki中,仔细看编译uboot.内核.制作刷机包的教程. 准备工作: 1. 虚拟机Ubuntu安装,并安装n多软件可以支撑编译内核等等. 2.  安装交叉编 ...

  4. 20155222卢梓杰 实验九 Web安全基础

    实验九 Web安全基础 今天不多bb,打开webgoat就是干好吧 1.简单字符串sql注入 可以看到这个实验说明是 "下表允许用户查看其信用卡号码.尝试插入一个SQL字符串,以显示所有信用 ...

  5. Python+Selenium爬取动态加载页面(1)

    注: 最近有一小任务,需要收集水质和水雨信息,找了两个网站:国家地表水水质自动监测实时数据发布系统和全国水雨情网.由于这两个网站的数据都是动态加载出来的,所以我用了Selenium来完成我的数据获取. ...

  6. 汇编  cdecl 函数调用约定,stdcall 函数调用约定

    知识点:  cdecl 函数调用约定  stdcall 函数调用约定  CALL堆栈平衡 配置属性--> c/c++ -->高级-->调用约定 一.cdecl调用约定 VC++ ...

  7. Caffe上手教程

    Caffe上手教程 入门系列FAQ72 在Unbuntu上安装Caffe828 Windows下安装Caffe1.4K Caffe框架上手教程1.2K Caffe编译运行调试462 Caffe 电脑配 ...

  8. TLV5620参考电压的问题

    1. TLV5620参考电压的,上面红线的VID的意思应该是引脚(REFA-REFD)输入的电压值(3.3V),下面的应该是实际参考值,根据实际测试VID=3.3V的时候,Vref=2.2V,至于为什 ...

  9. eclipse + maven + com.sun.jersey 创建 restful api

    maven 创建 jersey 项目 如果没找到 jersey archetype, 下载 maven 的 archetype xml, 然后导入 archetypes 运行 右击 main.java ...

  10. kubernetes 网络故障遇见的坑

    1.记录一下自己搭建kubernetes 集群遇见的坑. 过程是我学技术以来最大的bug,处处都是坑,稍微写成一点, 就完全起不来, 起不来之后, 还找不到故障点, 郁闷之极. 后续会慢慢分享给大家. ...