简易处理图片在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组件”,浏览一遍下来,勾起了博主小时候满满的回忆.于是下定决定要研究下这么一个东西,不得不再次叹息开源社区的强大,原来 ...
随机推荐
- BZOJ2427: [HAOI2010]软件安装 tarjan+树形背包
分析: 一开始我以为是裸的树形背包...之后被告知这东西...可能有环...什么!有环! 有环就搞掉就就可以了...tarjan缩点...建图记得建立从i到d[i]之后跑tarjan,因为这样才能判断 ...
- Kafka 集群部署
kafka是一个分布式消息队列,需要依赖ZooKeeper,请先安装好zk集群 kafka安装包解压 $ -0.9.0.1.tgz $ -0.9.0.1 /usr/kafka $ cd /usr/ka ...
- centos安装redis并设置开机启动
1.通过yum安装: yum install redis 2.设置redis.conf中daemonize为yes.设置密码: requirepass 3.安装完后的启动脚本是完善的,/etc/ini ...
- EZ 2018 05 13 NOIP2018 模拟赛(十三)
这次的比赛真心水,考时估分240,然后各种悠闲乱逛 然后测完T1数组开小了炸成40,T2,T3都没开long long,T2炸成20,T3爆0 掉回1600+的深渊,但是还有CJJ dalao比我更惨 ...
- python 回溯法 子集树模板 系列 —— 6、排课问题
问题 某乡村小学有六个年级,每个年级有一个班,共六个班. 周一到周五,每天上6节课,共计30节课. 开设的课程 一年级:语(9)数(9)书(2)体(2)美(2)音(2)德(2)班(1)安(1) 二年级 ...
- [Luogu5048] [Ynoi2019模拟赛]Yuno loves sqrt technology III[分块]
题意 长为 \(n\) 的序列,询问区间众数,强制在线. \(n\leq 5\times 10^5\). 分析 考虑分块,暴力统计出整块到整块之间的众数次数. 然后答案还可能出现在两边的两个独立的块中 ...
- 如何使用SVN
如何正确高效地管理软件的版本是一件让人头疼的事情,使用SVN是一个不错的选择.下面简要介绍SVN在windows xp和redhat两种平台下的使用.SVN软件包括服务器端和客户端程序. 1.如何在W ...
- centos7 部署mysql-5.7.20
一.系统环境 系统:CentOS Linux release 7.5 mysqlb进制包:mysql-5.7.20-linux-glibc2.12-x86_64.tar.gz 1)依赖包安装 yum ...
- PAT甲题题解-1124. Raffle for Weibo Followers-模拟,水题
水题一个,贴个代码吧. #include <iostream> #include <cstdio> #include <algorithm> #include &l ...
- Daily Scrum NO.8
工作概况 今天是周六,虽然由于工作紧张要求这一日也定为工作日,但是也许是因为昨日大家工作做得较多或者周末的缘故,今天的进展状况并不理想.线程池和异常清理器的后端已经完成,而清理器的界面和动态爬取仍旧没 ...