<body> <div class="container_live"> <img id="img_live" src="img/bg.jpg"/> </div> </body> 如何让图片始终居中,且保持16比9的比例显示
时间: 2023-07-14 07:12:05 浏览: 41
可以使用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的比例显示了。