分享个工作中遇到的关于图片高度已知,宽度未知的图片居中方法。

原创 番茄_o 教程 html笔记 235阅读 2017-11-16 11:26:12 举报

第一次发文,经验不足,悉心指导下我,不甚感激。

这个方法是针对不改变原图大小,高度始终保持铺满屏幕高度,在不同屏幕下始终保持原图居中的效果,可以在不同大小的屏幕中测试一下,然而唯一的缺点就是,原图两边会被截取隐藏,只留下中间部分。但在有些业务中是有遇到过这类需求的,经验分享一下,至少我遇到过。

html 代码

好多朋友没完全理解啊,我这里补充一下,我这里例子实现的前提条件是:在不同屏幕大小中,图片高度必须与屏幕高度相同,然后保持图片大小不变的情况下始终居中,有些朋友举的例子只是针对居中,并不能满足我这个条件的,不信你们再看看。

评论 ( 6 )
最新评论
杜塞尔多夫 4F 2017-11-24 14:53:11 6F

会自适应

番茄_o 3F 2017-11-23 10:57:41 5F

高度要刚好等于屏幕高度,然后保持图片大小不变,然后居中

番茄_o 2F 2017-11-23 10:56:30 4F

那屏幕宽度小于图片宽度呢?你这还有效吗?

IT白菜哥 2017-11-16 17:36:33 3F

如果只是为了铺满屏幕的可以这么写<img src="" style="height: 100%;width: 100%;object-fit: cover;">;object-fit: cover这个设置会一直保持图片的不变的情况下居中适应。

或者把图片作为容器的背景再加样式 style="background-image: url(..);background-position: center;background-size: 100% 100%;

杜塞尔多夫 2017-11-16 16:02:07 2F

其实只需要控制img的父节点div的宽度(width:100%,text-aligin:center),img宽高都不用管,img就是左右居中显示,不信你可以试试。
<style type="text/css">

.divheight{
    width: 100%;

    text-align: center;
}

</style>

lzh2740128806 2017-11-16 13:19:24 1F

css 代码

还能这么用