首页<body> <div class="container_live"> <img id="img_live" src="img/bg.jpg"/> </div> </body> 如何让图片始终居中

<body> <div class="container_live"> <img id="img_live" src="img/bg.jpg"/> </div> </body> 如何让图片始终居中

时间: 2023-07-14 21:12:02 浏览: 77

可以使用CSS来实现让图片始终居中。具体做法如下： 1. 将图片包裹在一个div容器中，容器的class为container_live，如下所示： ``` <div class="container_live"> <img id="img_live" src="img/bg.jpg"/> </div> ``` 2. 使用CSS设置该容器的样式，使其可以垂直和水平居中。可以使用flex布局实现，如下所示： ``` .container_live { display: flex; justify-content: center; align-items: center; } ``` 这样，无论图片的大小和父容器的大小如何变化，图片都会始终居中。

<body> <div class="container_live"> <img id="img_live" src="img/bg.jpg"/> </div> </body> 如何让图片始终居中，且保持16比9的比例显示

可以使用CSS的flex布局来实现图片始终居中，并保持16比9的比例显示。具体实现方式如下： ```html <body> <div class="container_live"> <div class="wrapper"> <img id="img_live" src="img/bg.jpg"/> </div> </div> </body> ``` ```css .container_live { display: flex; justify-content: center; align-items: center; height: 100vh; } .wrapper { width: 100%; max-width: 960px; height: 0; padding-bottom: 56.25%; /* 16:9比例的高度 */ position: relative; } #img_live { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } ``` 上述代码中，.container_live使用了flex布局，使其内部的元素在水平和垂直方向上都居中显示。.wrapper是一个包裹img的容器，使用padding-bottom属性来设置高度占位，保证了16:9的比例。而img则使用position:absolute属性，覆盖在.wrapper上方，并设置宽度和高度为100%，同时使用object-fit:cover属性来保持图片比例不失真。这样就能实现图片始终居中，且保持16比9的比例显示了。

阅读全文

最新推荐

【路径规划】乌燕鸥算法栅格地图机器人最短路径规划【含Matlab仿真 2886期】.zip

CSDN Matlab武动乾坤上传的资料均有对应的仿真结果图，仿真结果图均是完整代码运行得出，完整代码亲测可用，适合小白； 1、完整的代码压缩包内容主函数：main.m；调用函数：其他m文件；无需运行运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤步骤一：将所有文件放到Matlab的当前文件夹中；步骤二：双击打开main.m文件；步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询如需其他服务，可私信博主或扫描博客文章底部QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

【路径规划】生物地理算法栅格地图机器人最短路径规划【含Matlab仿真 2914期】.zip

【路径规划】冠状病毒群体免疫算法栅格地图机器人路径规划【含Matlab仿真 2818期】.zip

<body> <div class="container_live"> <img id="img_live" src="img/bg.jpg"/> </div> </body> 如何让图片始终居中