简易处理图片在div中居中铺满
原文地址: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中居中铺满的更多相关文章
- 如何使一个div能够铺满整个页面? && 模态框的制作 && outerHTML
说明: 使用 ele.outerHTML = '' 这样的方法可以很容易的清除一个元素. 当然也可以使用parent.removeChild() ,但是相较而言,还是使用 outerHTML = '' ...
- 转载 html div三列布局占满全屏(左右两列定宽或者百分比、中间自动适应,div在父div中居底)
原文地址:http://blog.csdn.net/duyelang/article/details/20558899 <p><!DOCTYPE html> <html ...
- 如何将div高度填满剩余高度
下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body"> <div id="navbar ...
- 实现左边div固定宽度,右边div自适应撑满剩下的宽度的布局方式:
html: <div class="container"> <div class="left"> left固定宽度200px </ ...
- 两个DIV,左DIV宽度固定,右DIV自动填满剩余空间
<style type="text/css"> #main{ width:98%; } #sidebar{ float:left; width:200px; backg ...
- css实现左边div固定宽度,右边div自适应撑满剩下的宽度
(1)使用float <div class="use-float"> <div></div> <div></div> & ...
- 左边div固定宽度,右边div自适应撑满剩下的宽度--实现方法汇总
神奇的事 其实有的方法(float.position.margin.flex)是有border像素的差 代码如下: <!DOCTYPE html><html><head ...
- 控制DIV占满屏幕
网上找了很多帖子,希望是CSS控制的,但是在bootstrap环境下, 控制方式上有点问题.达不到想要的效果. 项目中需要实现的效果: DIV区域占满当前窗口的高度.且在ctrl+鼠标滚轮调整窗口大小 ...
- JS组件系列——图片切换特效:简易抽奖系统
前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的“SlotMachine组件”,浏览一遍下来,勾起了博主小时候满满的回忆.于是下定决定要研究下这么一个东西,不得不再次叹息开源社区的强大,原来 ...
随机推荐
- mysql中查看一个字段中,有几个逗号
利用replace.length的内置函数
- CAN总线典型特征
CAN总线典型特征 2016-04-12 20:36:54来源: eefocus 关键字:CAN总线 典型特征 收藏 评论(0) 分享到 微博 QQ 微信 LinkedIn CAN总线有如下基本 ...
- java中CyclicBarrier简单入门使用
一个同步辅助类,它同意一组线程互相等待,直到到达某个公共屏障点 (common barrier point). 在涉及一组固定大小的线程的程序中,这些线程必须不时地互相等待.此时 CyclicBarr ...
- 查看历史命令 history
生产上有文件被清空了,想查查是谁操作的? 通过history查看历史命令: $history |more 也可以通过文件查看历史命令: $vi ~/.bash_history 只显示历史命令,像查一查 ...
- Python3入门(十)——调试与测试
一.异常处理 1.try...except...finally... 这个也就是Java里的try...cath..finally...了,直接看经典代码: try: print("开始执行 ...
- c# 菜鸟包裹查询
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.W ...
- 2017-2018-2 『网络对抗技术』Exp3:免杀原理与实践
1. 免杀原理与实践说明 一.实验说明 任务一:正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用shellcode编程等免杀工具或技巧:(1.5分) ...
- 20155237 《JAVA程序设计》实验二(JAVA面向对象程序设计)实验报告
20155237 <JAVA程序设计>实验二(JAVA面向对象程序设计)实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S ...
- 一、InnoDB引擎
一.InnoDB的历史 MYSQL的5.1版本的时候还是使用旧的innoDB,当时orale公司推出的新的innoDB引擎, 但是需要以插件的形式编译,叫innoDB plugin : 知道MYSQL ...
- JAVA 文件读取写入后 md5值不变的方法
假如我们想把某文件读入 StringBuffer 并写入新文件,新文件md5值需要保持不变(写入新文件后保证和源文件一模一样), 我们就需要在操作 StringBuffer 时附加换行符: Strin ...