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

1.最简单的水平居中

  <style>
.exa1{
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid #f00;
}
.exa1 img {
display: block;
width: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<h5>1.水平居中</h5>
<div class="exa1">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513482866&di=b7de9d07063752ad42c09826014e5a8d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.5442.com%2F2015%2F0305%2F07%2F001.jpg" alt="">
</div>
</body>
</html>

效果如下:

2.垂直居中(这里介绍两种)

第一种:

在图片父元素添加一个伪类before,利用vertical-align: middle的特性让图片垂直居中,不过感觉不是很方便

<style>
.exa2{
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid #f00;
}
.exa2::before{
content: "";
display: inline-block;
height: 300px;
vertical-align: middle;
}
.exa2 img {
width: 300px;
vertical-align: middle;
}
</style> <div class="exa2">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513482866&di=b7de9d07063752ad42c09826014e5a8d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.5442.com%2F2015%2F0305%2F07%2F001.jpg" alt="">
</div>
第二种:

我比较推荐第二种使用css3的新属性,不要跟我说兼容,我不管。。。。

这里主要用到transform的translateY它可以让元素基于它本身移动,而且参数能填写自身的百分百,看代码好了

<style>
.exa2{
width: 500px;
height: 300px;
margin: 0 auto;
border: 1px solid #f00;
}
.exa2 img {
position: relative; // 这里通过定位,也可以选择用absolute,看自己需要移动相对容器50%,在向上移动自身的50%,就达到垂直居中的效果了
top: 50%;
transform: translateY(-50%);
}
</style> <div class="exa2">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513482866&di=b7de9d07063752ad42c09826014e5a8d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.5442.com%2F2015%2F0305%2F07%2F001.jpg" alt="">
</div>

效果如下:

垂直水平居中

这个我想通过上面说的应该也能猜到怎么实现了

.exa2 img {
width: 300px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

就是加个left和translateX,其它都一样,如果要用垂直居中的第一种方法在父元素增加text-alegn:center;效果是一样的。代码就不贴了。

效果如下:


  • ps: 上面说到都是图片在位置上的转换,其实还有一种更简单的方法,就是object-position属性,用这个轻松简单快捷搞定所有你要的布局,可是它有一个之名缺点就是,IE下全方位不支持。如果不用兼容IE的建议直接怼这个。

用法:

object-position:value, value;

value可以是'center', 'left', 'bottom', 'right'或者是百分百,px;


图片自适应宽度或高度100%

可能项目中会有这种情况,容器大小是固定的,可是图片的尺寸确不同的。

这里就可以用到object-fit了在通过垂直水平居中就可以达到很好的效果了(同样这里也是不兼容大IE的)。下面是object-fit的值:

  • fill

被替换的内容的大小,以填补该元素的内容框:对象的具体对象的大小是元素的使用宽度和高度。

  • contain

被替换的内容的大小,为自身宽高比不变,适应该元素的内容框的大小:它的具体对象的大小被解析为对元素的使用宽度和高度的含有约束。

  • cover

被替换的内容的尺寸却使元件的整个内容框,以保持其长宽比其具体的对象的大小被解析为针对元素的使用的宽度和高度的盖约束。

  • none

被替换的内容的尺寸却使元件的整个内容框,以保持其长宽比其具体的对象的大小被解析为针对元素的使用的宽度和高度的盖约束。

  • scale-down

内容的尺寸仿佛none或contain指定了,取将导致更小的具体对象的大小。

用法:

img {
width: 100%;
height: 100%;
object-fit: contain;
}

如果想要兼容性好点可以用下面的方法,不过缺点就是图片的自身尺寸要比容器大才行:

  <style>
.exa1{
width: 500px;
height: 400px;
margin: 0 auto;
border: 1px solid #f00;
}
.exa1 img {
display: block;
max-width: 100%;
max-height: 100%;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h5>图片自适应宽度或高度100%</h5>
<div class="exa1">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513482866&di=b7de9d07063752ad42c09826014e5a8d&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.5442.com%2F2015%2F0305%2F07%2F001.jpg" alt="">
</div> </body>
</html>

效果图如下:

图片要铺满整个容器,但是不能变形

这里只能用到object-fit的cover;不过有兼容性问题。

img {
width: 100%;
height: 100%;
object-fit: cover;
}

效果如下:

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

  1. HTML/CSS实现文字环绕图片布局

    原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...

  2. PS图片转CSS+HTML页面的正确步骤

    转载来源:https://www.cnblogs.com/gg_lihui/p/3396409.html 制作网页标准的流程是:拿到网站美工制作的psd效果图后,网页设计师再把PS制作的图片转html ...

  3. JQuery Mobile 图片布局

    JQuery Mobile 图片布局 1.实现效果

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

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

  5. 用javascript预加载图片、css、js的方法研究

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...

  6. wp加载本地HTML(附带图片,CSS,JS)

    wp加载本地HTML(附带图片,CSS,JS) Windows Phone:Load Local HTML with Img,Css,Js by 唐小崇 http://www.cnblogs.com/ ...

  7. 微信小程序的布局css样式

    微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-w ...

  8. PS切图导出代码后出现的图片布局散乱的解决方法——table布局

    前言: 一般来说,大部分美工PS切图后导出的都是使用PS默认的table布局的页面,出现最多的异常是上传代码,替换图片后,发现图片布局散乱,完全不是想要的效果.轻微的是浏览器不兼容,只有部分浏览器可以 ...

  9. flex图片布局

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>f ...

随机推荐

  1. Leetcode题解(十七)

    48.Rotate Image 题目: 分析:题目意思很简单,就是将一个n*n的矩阵顺时针旋转90度. 这道题难度不大,按照旋转的过程走一遍即可.代码如下: class Solution { publ ...

  2. Toxophily

    Problem Description The recreation center of WHU ACM Team has indoor billiards, Ping Pang, chess and ...

  3. 网络拓展知识 ACL NAT IPv6

    第1章 ACL 访问控制列表 访问控制表(”位代表精确匹配,而“1“位代表不许匹配. 例如路由器EIGRP的配置中: RouterA(config)#router eigrp 100 RouterA( ...

  4. selenium+testN自动化测试框架搭建

    自动化测试框架搭建 1 Java环境的搭建 1.1访问oracle的官网下载最新版本的jdk http://www.oracle.com/technetwork/java/javase/downloa ...

  5. 享受Python和PHP动态类型检查语言的快感

    前言 写这文章的时候特地查了资料,以确保我没有说错关于Python和PHP的类型机制. 所以这里放一张图,关于强弱类型与动态/静态类型检查的区分 从分类上看,PHP属于弱类型语言,而Python属于强 ...

  6. [Bayesian] “我是bayesian我怕谁”系列 - Gaussian Process

    科班出身,贝叶斯护体,正本清源,故拿”九阳神功“自比,而非邪气十足的”九阴真经“: 现在看来,此前的八层功力都为这第九层作基础: 本系列第九篇,助/祝你早日hold住神功第九重,加入血统纯正的人工智能 ...

  7. SSM框架搭建(Spring+SpringMVC+MyBatis)与easyui集成并实现增删改查实现

    一.用myEclipse初始化Web项目 新建一个web project: 二.创建包 controller        //控制类 service //服务接口 service.impl //服务 ...

  8. springmvc跨域+token验证(app后台框架搭建二)

    这是app后台框架搭建的第二课,主要针对app应用是跨域的运用,讲解怎么配置跨域服务:其次讲解怎么进行token验证,通过拦截器设置token验证和把token设置到http报文中.主要有如下:   ...

  9. tab面板,html+css

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  10. [最短路]信使(msner)

    [题目描述] 战争时期,前线有n个哨所,每个哨所可能会与其他若干个哨所之间有通信联系.信使负责在哨所之间传递信息,当然,这是要花费一定时间的(以天为单位).指挥部设在第一个哨所.当指挥部下达一个命令后 ...