• 对于平时项目开发中,经常要展示图片。什么水平居中显示,垂直居中显示,水平或垂直居中显示...我们的发际线就是这样往后退的。
  • 接下来要讲的就是对于各种图片布局的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. document.body.scrollTop 值总为0

    http://www.jb51.net/article/21168.htm 页面具有 DTD(或者说指定了 DOCTYPE)时,使用 document.documentElement.     做页面 ...

  2. 用C#生成不重复的随机数

    我们在做能自动生成试卷的考试系统时,常常需要随机生成一组不重复的题目,在.net Framework中提供了一个专门用来产生随机数的类System.Random. 对于随机数,大家都知道,计算机不 可 ...

  3. 基础教程:上传/下载ASP.NET Core 2.0中的文件

    问题 如何上传和下载ASP.NET Core MVC中的文件. 解 在一个空的项目中,更新 Startup 类以添加MVC的服务和中间件. publicvoid ConfigureServices( ...

  4. Vocabulary & Phrase

    Vocabulary A ANSI    美国国家标准学会,American National Standards Institute的缩写 a couple of    [口语]少数的,几个 a s ...

  5. Mysql 用法

    一转眼,一个星期过去了,来到测试班也一个星期了,今天经历了一次,这是自己这一周的总结,也算对自己这一周的一个交代. 几个比较重要的语句: 查看数据库 show databases; 创建数据库 cre ...

  6. centos6.9(Linux系统)安装VMware tools教程

    VMware tools是虚拟机上虚拟硬件的驱动,可以实现鼠标的无缝移出移入,剪贴板共享,共享文件夹等功能.很多的Linux系统初学者,在安装centos6.9系统时,没有安装VMware tools ...

  7. JavaWeb框架SSH_Struts2_(二)

    1.  Struts2的核心配置(详解) 本章内容目录: 配置struts.xml文件 struts.xml文件 常量配置 包配置 包含配置 Action配置 实现Action控制类 配置Action ...

  8. set 利用lower_bound实现key索引

    set中数据类型为结构体T,T中有两个成员key和val定义如下: struct T{ int key,val; T(int k,int v):key(k),val(v){} bool operato ...

  9. 【技术翻译】支持向量机简明教程及其在python和R下的调参

    原文:Simple Tutorial on SVM and Parameter Tuning in Python and R 介绍 数据在机器学习中是重要的一种任务,支持向量机(SVM)在模式分类和非 ...

  10. axios跨域

    参考:http://www.ruanyifeng.com/blog/2016/04/cors.html 遇到前后分离情况 前端 a.com 后端 server.a.com 环境 vue全家桶前端 ph ...