<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex图片布局</title>
<style>
body {
margin: 0;
padding: 0;
}

.box {
float: left;
width: 30%;
margin-top: 10px;
margin-left: 2.5%;
height: 0;
padding-bottom: 33.98%;
background-color: #dbe0e4;
background:red;
background-size: cover;
display:block;position: relative;

}
img{

background: red;
margin: 0 auto;
max-width: 100%;
/*超出宽度的图片限制最大显示宽度
max-height:250px;
/*超出高度的图片限制最大显示高度*/
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>

<body>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box">
<img src="" alt="">
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>

</html>

flex图片布局的更多相关文章

  1. CSS3新属性之---flex box布局实例

    flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...

  2. css进阶之二：flex弹性布局

    布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...

  3. 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局

    移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器, ...

  4. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  5. iOS开发——UI篇OC篇&不规则排列的图片布局

    不规则排列的图片布局 一直在500px上看照片,发照片.以前看它的首页图片展示就只是觉得好看,洋气,也没想过自己在iOS上实现一下.昨天不知怎么的就开始想其中的算法了,现在我把思考的过程在这里贴出来分 ...

  6. 记一下flex弹性布局

    flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...

  7. 图片布局css

    对于平时项目开发中,经常要展示图片.什么水平居中显示,垂直居中显示,水平或垂直居中显示...我们的发际线就是这样往后退的. 接下来要讲的就是对于各种图片布局的css实现(这里针对的是img标签的不会使 ...

  8. CSS3动画属性和flex弹性布局各个属性

    [CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...

  9. flex 输入框布局

    1:创建一个弹性容器(display:flex) 2:构建2个或3个弹性项目. 3:把弹性项目设置为居中对齐.(align-items:center) 4:改变input自身对齐方式,把它设置为拉伸以 ...

随机推荐

  1. 敏捷冲刺DAY6

    一. 每日会议 1. 照片 2. 昨日完成工作 3. 今日完成工作 4. 工作中遇到的困难 对于可视控件,是能进行设计的,但是对于不可视组件,比如AdoConnection怎么才能设计.但是我看del ...

  2. Vue于React特性对比（二）

    一,关于响应式数据更新方式的实现 1)只有在data里面定义的数据才会有响应式更新 vue依赖的defineProperty的数据劫持加上依赖数据,实现数据的响应式更新.可以称之为依赖式的响应.因为依 ...

  3. java 基础 --File

    1, 创建文件 File file = new File(path); file.createNewFile(); //如果路径不存在,会抛异常 file.mkdir();//如果路径不存在,返回fa ...

  4. postman优缺点

    postman优缺点分析 优点:门槛低,上手快 优点: 脚本语言是js 优点:自带各种代码模块 优点:跨平台 优点: 免费版就已经非常强大了,支持http,https协议 优点:有命令行版本,newm ...

  5. 【bzoj3730】震波 动态点分治+线段树

    题目描述 在一片土地上有N个城市,通过N-1条无向边互相连接,形成一棵树的结构,相邻两个城市的距离为1,其中第i个城市的价值为value[i].不幸的是,这片土地常常发生地震,并且随着时代的发展,城市 ...

  6. IP组播技术

      1  概述 1.1  产生背景 传统的IP通信有两种方式:一种是在源主机与目的主机之间点对点的通信,即单播:另一种是在源主机与同一网段中所有其它主机之间点对多点的通信,即广播.如果要将信息发送给多 ...

  7. P1054 等价表达式

    题目描述 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数表达式,然后列出了若干选项,每个选项也是一个代数表达式,题目的要求是判断选项中哪些代数 ...

  8. html/css/js 学习笔记 - 牛客网试卷:前端工程师能力评估

    display属性 : block : CSS1 块对象的默认值.将对象强制作为块对象呈递,为对象之后添加新行   可以定义高度和宽度 none : CSS1 隐藏对象.与 visibility 属性 ...

  9. "XX cannot be resolved to a type "eclipse报错及解决

    好久都没有写博了,还记得自己准备考研,结果你会发现——你永远不知道,你将会走上哪个路. 长远的目标是好的,但有些时候身不由己也迫不得已!做好自己的当下就是好的. 不论搞什么,总会遇到各种各样的问题,以 ...

  10. Redis的String、Hash类型命令

    String是最简单的类型,一个Key对应一个Value,string类型是二进制安全的.Redis的string可以包含任何数据,比如jpg图片或者序列化的对象.最大上限是1G字节.    Hash ...