图片布局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 ...
随机推荐
- Java中的类变量、实例变量、类方法、实例方法的区别
类变量:形如static int a; 顾名思义,类变量可以理解为类的变量,类变量在类加载的时候就已经给它分配了内存空间,不同于实例变量(int a; ),实例变量是在该类创建对象的时候分配内存的.并 ...
- 2017广东工业大学程序设计竞赛决赛-tmk买礼物
tmk买礼物 Description 今天是校赛的日子,为了庆祝这么喜庆的日子,TMK打算买些礼物给女票LSH庆祝一下. TMK进入了雪梨超市,然后刚踏入的一瞬间,店主就对TMK说:“恭喜你成为了本店 ...
- javascript中toString和valueOf方法的区别
toString():将对象转为字符串 valueOf():获取对象的原始值, 1.针对基本类型的变量:如在string,number,boolean类型的变量上调用这两个方法时,直接返回原始值,即变 ...
- 检测CSS属性 是否支持
原理是:创建一个节点,判断其的style属性是否含有textOverflow属性,有则进一步判断是否支持ellipsis这个值.当遇到不支持的属性值时,浏览器会直接把这个值抛弃.因此这里就可以先给te ...
- C语言实现二叉树的基本操作
二叉树是一种非常重要的数据结构.本文总结了二叉树的常见操作:二叉树的构建,查找,删除,二叉树的遍历(包括前序遍历.中序遍历.后序遍历.层次遍历),二叉搜索树的构造等. 1. 二叉树的构建 二叉树的基本 ...
- Container With Most Water 容器最大水容量
描述 Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai ...
- 阿里Dubbo疯狂更新,关Spring Cloud什么事?
最近,开源社区发生了一件大事,那个全国 Java 开发者使用最广的开源服务框架 Dubbo 低调重启维护,并且 3 个月连续发布了 4 个维护版本. 我上次在写放弃Dubbo,选择最流行的Spring ...
- 查看oracle数据库里哪些语句耗时最长或者效率最低
CPU: select * from (select v.sql_id, v.child_number, v.sql_text, v.elapsed_time, v.cpu_time, v.disk_ ...
- window下安装Apache+PHP
本地系统为windows 10,Apache选择httpd-2.4.25-x64-vc14-r1,PHP选择php7.1_x64线程安全版. 1.安装Apache 将apache解压到c:/serve ...
- configpraser模块
configpraser配置文件,example.conf [data] #节点 username = Jason password = 123 [public] comment = stuff pu ...