【安卓前端】CSS图片居中的方式

最新推荐文章于 2022-11-25 13:16:59 发布

weixin_30394669

最新推荐文章于 2022-11-25 13:16:59 发布

阅读量191

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/nicojerry/p/11424012.html

版权

在一个项目中使用了WebView，有一个场景是显示一张全屏图片，因为之前有一点点前端基础，而且有空的时候也会去抽空学习了解前端的基础知识，毕竟基础前端在安卓也是有广泛应用，特别是前端与原生交互。

总的来说，前端显示图片有两种方式：img标签、background-image

两种方式都能实现在块级盒中居中显示图片，不过我建议使用img标签，能使用js控制标签实现一些不错的动画效果。

background-image

给块级盒设置一张背景图片，并且通过background-size控制图片缩放到盒子内部，然后用background-position将图片居中显示，background-repeat设置背景图片不重复。

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <style>
        * {
            padding:0px;
            margin:0px;
        }
        html, body{
            height: 100%;
            width: 100%;
        }
        #app{
            height: 100%;
            width: 100%;
            background-image: url(a.jpg);
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
        }
        </style>
    </head>

    <body>
        <div id="app"></div>
    </body>

</html>

img标签

object-fit是核心所在，通过设置object-fit的值为contain将图片缩放到img标签内，此属性对置换元素起作用，决定内容如何缩放到盒子上。

<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <style>
        * {
            padding:0px;
            margin:0px;
        }
        html, body{
            height: 100%;
            width: 100%;
        }
        #app{
            height: 100%;
            width: 100%;
        }
        img {
            object-fit: contain;
            width:100%;
            height:100%;
        }
        </style>
    </head>

    <body>
        <div id="app">
            <img src="./a.jpg">
        </div>
    </body>

</html>

转载于:https://www.cnblogs.com/nicojerry/p/11424012.html

weixin_30394669

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【安卓前端】CSS图片居中的方式

在一个项目中使用了WebView，有一个场景是显示一张全屏图片，因为之前有一点点前端基础，而且有空的时候也会去抽空学习了解前端的基础知识，毕竟基础前端在安卓也是有广泛应用，特别是前端与原生交互。总的来说，前端显示图片有两种方式：img标签、background-image两种方式都能实现在块级盒中居中显示图片，不过我建议使用img标签，能使用js控制标签实现一些不错的...
复制链接

扫一扫