制作网页的很多时候为了页面美观都需要图片能够做到上下居中、左右居中。网上现实的方式方法也有很多,这里分享我经常使用的一种方法。
// HTML代码
<div class="row">
<div class="col-xs-3">
<img src="/public/empty_200x100.png" class="imgbg" style="background-image:url('/uploads/demo.jpg');">
</div>
</div>
// CSS 代码
<style type="text/css">
.imgbg{
width:100%;
background-color: #ebf2f9;
background-position: center;
background-size:contain;
background-repeat: no-repeat;
}
</style>
实现原理
1、先准备一张透明的png图片。
2、对这个图片定义一个 Css样式,添加这几个属性:
background-position: center;背景图片居中
background-size: contain;显示完整背景图片
background-repeat: no-repeat;背景图不重复
3、然后把要显示的图片作为背景图片。
这样图片就不会随着尺寸不同错位显示。展示的时候如果需要显示正方形图片,只需要制作一个1x1比例的png图片,另外可以根据自己的要求制作png图片。
升级处理
在展示图片的时候,可能有些小伙伴不喜欢把图片放到style样式里面,可能会感觉到看起来怪怪的。
style="background-image: url('/uploads/demo.jpg');
我们想要的可能是这样的展示方式
<img src="/public/empty_200x100.png" data-src="/uploads/demo.jpg" class="imgbg">
这样其实也简单,我们可以借助于 jquery 来实现这个功能。代码如下:
<script type="text/javascript">
$(document).ready(function() {
$("[class='imgbg']").each(function(index, el) {
$(this).css('background-image', 'url(' + $(this).data('src') + ')');
});
});
</script>
PHP 实现
PHP 实现生成图片也分为二种
1、图片上传的时候,按后台设置的尺寸生成。
2、图片预览的时候,按URL中设置的参数生成。
github地址
https://github.com/zjutsxj/autoCropImage
过前端开发的朋友都知道,要使文字在一个div容器垂直居中显示是很简单的事,但是如果是要让一张图片在div容器中垂直显示那就有点伤脑筋了,因为图片是个置换元素,有些特殊的特性,对于前端开发的大牛来说还好,解决方法有很多,比如什么利用js啊之类的,但是这些对于初学者来说就有些难度了,今天小编就把自己平时在项目中用的方法分享给大家,给大家一个参考。
其实小编用的方法也不是什么很高端的技术,算是最low的方法吧,但是很实用,能兼容各种浏览器,为了演示,小编直接从某宝商家店铺里拿了一张商品图来做演示,因为商品图都是高清无码的,且还很大,所以我们在CSS中把图片的高度设置为200px,div容器的高度为300px,完整的代码如下:
最终的运行效果如下图:
可以看到,这个图片在div中水平、垂直都是在正中间,是不是很完美。这个原理也很简单,就是在div容器中加了个 <i> 标签并把它的 display 属性设置为 inline-block(行内块元素),让它去撑开div容器的高度,再把图片的 vertical-align 属性设置为 middle 就可以垂直居中了,当然这只是个演示,大家在实际的项目中可以利用 max-width、min-width、max-height、min-height 等属性让图片根据需要自适应,以达到想要的效果。
当然解决方法还有很多种,具体用什么方法需根据自身页面布局去权衡,总之没有最好的,只有最适合的,如果你有更好的方法也可以告诉小编哦,一起交流方法,共同进步。
通常首选方法是使用flexbox居中内容。只需三行代码即可:display:flex,然后使用 align-items:center 和 justify-content:center 将子元素垂直和水平居中。
如下代码:
html:
<div class="flexbox-centering">
<div>Centered content.</div>
</div>
css:
.flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
使用grid(网格)与flexbox非常相似,也是一种常见的技术,尤其是布局中已经使用网格的情况下。与前一种flexbox技术的唯一区别是它显示为栅格。
如下代码:
html:
<div class="grid-centering">
<div class="child">Centered content.</div>
</div>
css:
*请认真填写需求信息,我们会在24小时内与您取得联系。