<!DOCTYPE html> <html> <head> <title>Live</title> <style> .container { position: relative; max-height: 100vh; /* 设置容器最大高度不超过浏览器高度 */ text-align: center; /* 水平居中对齐 */ display: flex; /* 使用flex布局 */ justify-content: center; /* 水平居中对齐 */ align-items: center; /* 垂直居中对齐 */ } .container img { width: 100%; /* 设置图片宽度为100% */ height: auto; /* 设置图片高度为自适应 */ max-height: calc(100vh - 80px); /* 设置图片最大高度不超过容器高度减去一定的边距(20px) */ } </style> </head> <body> <div class="container"> <img src="test_data/test.jpg" alt="your_image_description"> </div> </body> </html>如何让图片居中
时间: 2023-06-25 08:07:15 浏览: 259
HTML !DOCTYPE 标签 声明HTML版本
可以使用以下CSS样式将图片水平和垂直居中:
```
.container {
display: flex;
justify-content: center;
align-items: center;
}
.container img {
max-width: 100%;
max-height: 100%;
}
```
其中`.container`设置为`flex`布局,通过`justify-content`和`align-items`属性分别实现水平和垂直居中。`.container img`设置最大宽度和最大高度为100%,确保图片不会超出容器范围。
阅读全文