原文地址: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. mysql中left join中的on条件 和 where条件区别

    需要知道sql中关键字的执行顺序. FROM-> ON->JOIN-> WHERE->GROUP BY-> HAVING->SELECT-> DISTINCT ...

  2. W25Q128---读写

    占坑! 总结:通信方式是SPI,读数据可以从任何地方读,写数据和擦出数据需要按照页或者扇区或者簇为单位进行. 写数据:一次最多写一页,如果超出一页数据长度,则分几次完成.例如本芯片一个扇区为4096个 ...

  3. Hadoop日记Day16---命令行运行MapReduce程序

    一.代码编写 1.1 单词统计 回顾我们以前单词统计的例子,如代码1.1所示. package counter; import java.net.URI; import org.apache.hado ...

  4. CS50.3

    1,int()取整函数 2,RPG(role playing game )角色扮演游戏 3,代码写了,要跑,需要compiler (编译器) 4,CLI(command-line interface) ...

  5. [UOJ#276][清华集训2016]汽水[分数规划+点分治]

    题意 给定一棵 \(n\) 个点的树,给定 \(k\) ,求 \(|\frac{\sum w(路径长度)}{t(路径边数)}-k|\)的最小值. \(n\leq 5\times 10^5,k\leq ...

  6. 牛客OI周赛4-提高组-C-战争[并查集]

    题意 一个长度为 \(n\) 的序列,每个权值互不相同,给出形如 \(l,r,p\) 的信息表示 \([l,r]\) 区间中最小的数是 \(p\) ,问第几个信息开始出现矛盾. \(n\leq 5 \ ...

  7. Panorama——H5实现全景图片原理

    前言 H5是怎么实现全景图片播放呢? 正文 全景图的基本原理即 "等距圆柱投影",这是一种将球体上的各个点投影到圆柱体的侧面上的一种投影方式,投影后再展开就是一张 2:1 的矩形图 ...

  8. Asp.Net_from标签中的Enctype=multipart/form-data作用

    ENCTYPE="multipart/form-data"用于表单里有图片上传. <form name="userInfo" method="p ...

  9. A1020. Tree Traversals(25)

    这是一题二叉树遍历的典型题,告诉我们中序遍历和另外一种遍历序列,然后求任何一种遍历序列. 这题的核心: 建树 BFS #include<bits/stdc++.h> using names ...

  10. android listview addheaderview viewpager

    just set viewPager's onTouchListener,like this: viewPager.setOnTouchListener(new OnTouchListener() { ...