图片自适应父元素大小,并左右上下居中的css方法

图片自适应父元素大小,并左右上下居中的css方法

前言

这种效果多见于矩形盒子里面调用不规则的图片,希望能够达到的效果。这个效果可以很简单的用css来实现,虽然已经烂熟于心,但是并未记录下来。今天看到又有这个需求,所以写了一个简单的demo,放在这里,便于自己记忆。

效果图:

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="pic"><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1438475101,354016904&fm=58" alt=""></div>
  <div class="pic"><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2201558756,12364836&fm=111&gp=0.jpg" alt=""></div>
</body>
</html>
<style>
.pic {
  width: 120px;height: 120px;margin: 40px auto;border: 1px solid #ccc;text-align: center;padding: 5px;
}
.pic:before {
  content: "";display: inline-block;height: 100%;vertical-align: middle;width: 0;
}
.pic img {
  max-width: 120px; max-height: 120px;vertical-align: middle;
}
</style>

核心思想 就是给父元素添加一个固定100%高度的伪元素撑开,并使用vertical-align: middle;使得内容垂直居中为中间,这样,图片就会垂直居中了。当然,图片也需要加上vertical-align: middle;

实际运行效果:http://runjs.cn/detail/wkpxpghm

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coding01

推荐一款快速生成海报的微信小插件

现在很多小程序都有生成海报,分享海报的功能。我们自己的几个小程序 (如:爸妈搜商城、爸妈搜云课堂、幼师大学、跟着外教学英语等) 也都有生成海报的功能。因此技术团...

1252
来自专栏非著名程序员

Android字体大小怎么自适应不同分辨率?

今天有人问我,android系统不同分辨率,不同大小的手机,字体大小怎么去适应呢?其实字体的适应和图片的适应是一个道理的。 一、 原理如下: 假设需要适应320...

3808
来自专栏HTML5学堂

标签的选择

这么多篇文章下来,大家对如何进行页面布局想必已经有了自己的一些想法,特别是上周的文本样式的介绍,让大家可以实现了对整个页面的搭建以及制作。所以基本的制作已经没有...

3559
来自专栏九彩拼盘的叨叨叨

CSS3的属性值inital

属性值inital是指CSS规范(CSS specifications)指定的值。 例如规范中定义: display 的 inital 值为 inline; ...

822
来自专栏林德熙的博客

WPF 解决 ViewBox 不显示线的问题

ViewBox 是一个好用的东西,但是在他缩小的时候,可能有一些线无法显示。 现在公司项目就是做一个类似 ppt 的软件,所以需要使用缩略图,而对于矩形形状,在...

1721
来自专栏python3

tkinter -- 文本的多行显示

使用 width 和 heigth 来指定控件的大小,如果指定的大小无法满足文本的要求,

1815
来自专栏跟着阿笨一起玩NET

DataGridView控件使用大全

DataGridView控件使用大全:http://www.haogongju.net/art/847949

4221
来自专栏我的博客

ewebeditor v3.8水印处理位置调整

今天使用ewebeditor编辑器,发现图片水印不能调节,只能在左上角。于是找相关调节水印代码。找到关键代码,将水印调节到右下角了。 找到php文件夹下的upl...

2945
来自专栏Young Dreamer

CSS——图片替换方法比较

图片替换主要是指将文字替换成图片的技术,即在html语句中使用文字,浏览器显示时用对应的图片显示。其意义在于便于做网站优化(SEO),文字才是搜索引擎寻找的主要...

29910
来自专栏偏前端工程师的驿站

JS魔法堂:通过marquee标签实现信息滚动效果

一、前言                                      有限的空间展现无限的内容,这是滚动最常用到的地方。根据信息滚动效果我们可以有...

2657

扫码关注云+社区

领取腾讯云代金券