<body> <div class="container_live"> <img id="img_live" src="img/bg.jpg"/> </div> </body> 如何让图片始终居中
时间: 2023-07-14 08:12:02 浏览: 74
可以使用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的比例显示了。
<!DOCTYPE html> <html> <head> <title>Live</title> <style type="text/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; } </style> </head> <body> <div class="container_live"> <div class="wrapper"> <img id="img_live" src="test_data/ahri.jpg"/> </div> </div> </body> </html>为什么图片显示不出来
可能有几个原因导致图片无法显示:
1. 图片路径不正确,需要确认图片路径是否正确,是否存在。
2. 图片格式不支持,需要确认图片格式是否为浏览器支持的格式,如jpg、png等。
3. 网络问题,需要确认网络是否正常,图片是否被防火墙拦截等。
可以通过在浏览器中打开控制台,查看控制台中的错误信息,以便更好地排除问题。
阅读全文