原文地址: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. php操作url 函数等

    pathinfo() - Returns information about a file path parse_str() - Parses the string into variables pa ...

  2. Modelsim SE 和 Quartus II 编译器(综合器)的区别

    当对目标模块进行RTL描述后,习惯先会用Modelsim做一下功能仿真.当我们写好Tensbench文件,直接在Modelsim SE中对源文件(design和Testbench)进行编译时,如果源文 ...

  3. 使用参数化查询防止SQL注入漏洞(转)

    SQL注入的原理 以往在Web应用程序访问数据库时一般是采取拼接字符串的形式,比如登录的时候就是根据用户名和密码去查询: string sql * FROM [User] WHERE UserName ...

  4. 通过定义过滤器filter解决跨域问题

            跨域是比较常见问题,比较简单的方式就是直接定义一个过滤器filter,然后在请求头里面加上一些参数.下面来看看具体的写法吧. 一.java代码 package com.hj.usera ...

  5. python 翻转棋(othello)

    利用上一篇的框架,再写了个翻转棋的程序,为了调试minimax算法,花了两天的时间. 几点改进说明: 拆分成四个文件:board.py,player.py,ai.py,othello.py.使得整个结 ...

  6. eclipse 最最最常用快捷键

    使用eclipse这么久,发现其跟PS一样,使用一些快捷键会有效率很多. 至此总结出以下每次打开eclipse基本都会用上的快捷键. 不熟悉这些快捷键,在实际编程中有意识使用的话对以后编码很有帮助. ...

  7. tensorflow 曲线拟合

    tensorflow 曲线拟合 Python代码: import numpy as np import tensorflow as tf import matplotlib.pyplot as plt ...

  8. 初次接触Dynamics 365

    最近项目上需要用到微软的Dynamics 365 这个产品,Bing上搜索了一下,看了很多大佬在博客上分享了使用Dynamics 365的经验,简单了解了Dynamics 365 是什么,也有很多大企 ...

  9. 阿里云ECS服务器源配置

    前段时间领取了阿里云ECS免费试用6个月的福利,此处记录一下服务器源配置过程和服务器用户创建过程. 一.CentOS源配置 1.备份 mv /etc/yum.repos.d/CentOS-Base.r ...

  10. 【翻译】给初学者的 Neural Networks / 神经网络 介绍

    本文翻译自 SATYA MALLICK 的  "Neural Networks : A 30,000 Feet View for Beginners" 原文链接: https:// ...