图片布局css
对于平时项目开发中,经常要展示图片。什么水平居中显示,垂直居中显示,水平或垂直居中显示...我们的发际线就是这样往后退的。
接下来要讲的就是对于各种图片布局的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的更多相关文章
- HTML/CSS实现文字环绕图片布局
原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...
- PS图片转CSS+HTML页面的正确步骤
转载来源:https://www.cnblogs.com/gg_lihui/p/3396409.html 制作网页标准的流程是:拿到网站美工制作的psd效果图后,网页设计师再把PS制作的图片转html ...
- JQuery Mobile 图片布局
JQuery Mobile 图片布局 1.实现效果
- iOS开发——UI篇OC篇&不规则排列的图片布局
不规则排列的图片布局 一直在500px上看照片,发照片.以前看它的首页图片展示就只是觉得好看,洋气,也没想过自己在iOS上实现一下.昨天不知怎么的就开始想其中的算法了,现在我把思考的过程在这里贴出来分 ...
- 用javascript预加载图片、css、js的方法研究
预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...
- wp加载本地HTML(附带图片,CSS,JS)
wp加载本地HTML(附带图片,CSS,JS) Windows Phone:Load Local HTML with Img,Css,Js by 唐小崇 http://www.cnblogs.com/ ...
- 微信小程序的布局css样式
微信小程序的布局css样式width: fit-content;font-size:20px; /*设置文字字号*/color:red; /*设置文字颜色*/font-w ...
- PS切图导出代码后出现的图片布局散乱的解决方法——table布局
前言: 一般来说,大部分美工PS切图后导出的都是使用PS默认的table布局的页面,出现最多的异常是上传代码,替换图片后,发现图片布局散乱,完全不是想要的效果.轻微的是浏览器不兼容,只有部分浏览器可以 ...
- flex图片布局
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>f ...
随机推荐
- 分布式数据库TiDB的部署
转自:https://my.oschina.net/Kenyon/blog/908370 一.环境 CentOS Linux release 7.3.1611 (Core)172.26.11.91 ...
- [转]Java - 集合框架完全解析
数据结构是以某种形式将数据组织在一起的集合,它不仅存储数据,还支持访问和处理数据的操作.Java提供了几个能有效地组织和操作数据的数据结构,这些数据结构通常称为Java集合框架.在平常的学习开发中,灵 ...
- Javascript的RegExp对象(转载自网络)
正则表达式是一个描述字符模式的对象. JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法. '***************** ...
- T9
T9 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission ...
- Codeforces Round #386 (Div. 2) C. Tram
C. Tram time limit per test 1 second memory limit per test 256 megabytes input standard input output ...
- SSH框架的多表查询和增删查改 (方法一)中
原创作品,允许转载,转载时请务必标明作者信息和声明本文章==>http://www.cnblogs.com/zhu520/p/7774144.html 这边文章是接的刚刚前一遍的基础上敲的 ...
- c++学习笔记---03---从一个小程序说起2
从一个小程序说起2 要求:编写一个程序,要求用户输入一串整数和任意数目的空格,这些整数必须位于同一行中,但允许出现在该行中的任何位置.当用户按下键盘上的"Enter"键时,数据输入 ...
- JavaScript Function.arguments 属性详解
语法 [functionObject.]arguments arguments属性是正在执行的函数的内置属性,返回该函数的arguments对象.arguments对象包含了调用该函数时所传入的实际参 ...
- Grunt打包之seajs项目【转】
原文:http://www.cnblogs.com/accordion/p/4508154.html grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我 ...
- rpm命令常用选项
安装rpm包 # rpm -ivh ***.rpm #其中i表示安装,v表示显示安装过程,h表示显示进度 升级rpm包 # rpm -Uvh ***.rpm 删除软件包 # rpm -e PACKAG ...