简易处理图片在div中居中铺满

时间:2022-07-05 14:51:14

原文地址: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. Autofac - 生命周期

    实例生命周期决定在同一个服务的每个请求的实例是如何共享的. 当请求一个服务的时候,Autofac会返回一个单例 (single instance作用域), 一个新的对象 (per lifetime作用 ...

  2. &lbrack;转&rsqb;&lbbrk;阮一峰&rbbrk;Linux 守护进程的启动方法

    ❲阮一峰❳Linux 守护进程的启动方法 "守护进程"(daemon)就是一直在后台运行的进程(daemon). 本文介绍如何将一个 Web 应用,启动为守护进程. 一.问题的由来 ...

  3. INNO setup安装卸载钱判断进程中是否在运行总结

    1.安装前判断进程中是否有程序在运行. [files] ; 安装前判断进程,dll文件放在inno的安装目录中Source: compiler:psvince.dll; Flags: dontcopy ...

  4. iOS开发——UI高级OC篇&amp&semi;自定义控件之调整按钮中子控件(图片和文字)的位置

    自定义控件之调整按钮中子控件(图片和文字)的位置 其实还有一种是在storyBoard中实现的,只需要设置对应空间的左右间距: 这里实现前面两种自定义的方式 一:imageRectForContent ...

  5. uImage、zImage、bzImage、vlinzx区别

    在网络中,不少服务器采用的是Linux系统.为了进一步提高服务器的性能,可能需要根 据特定的硬件及需求重新编译Linux内核.编译Linux 内核,需要根据规定的步骤进行,编译内核过程中涉及到几个重要 ...

  6. 谷歌Web中国开发手册:1目的&amp&semi;amp&semi;夹

    原版的:https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/ 该网站 ...

  7. 对于JAVA程序优化的一些想法&comma;读书有感&period;治疗强迫症良药

    在深入了解Java虚拟机里读到:在try{}块里面执行代码,比if(x!=null)效率要高,前提是被catch的几率很低的情况下. 但是 在Effective Java里读到:因为异常机制的设计初衷 ...

  8. THUSC2017 Day1题解

    THUSC2017 Day1题解 巧克力 题目描述 "人生就像一盒巧克力,你永远不知道吃到的下一块是什么味道." 明明收到了一大块巧克力,里面有若干小块,排成n行m列.每一小块都有 ...

  9. redis-scala链接redis集群

    代码: package com.wenbronk.sparkstreaming.scala.commons import java.time.Duration import io.lettuce.co ...

  10. ActiveMQ核心技术

                                        消息中间件技术 一.ActiveMQ 1>生产消息,消费消息流程图