html5 如何让img始终居中 按16:9显示，且最大高度不能超过浏览器高度

可以使用CSS样式来实现这个效果。首先，将img元素的父元素设为相对定位（position: relative）。然后，将img元素的宽度设置为100%（width: 100%），高度设置为auto（height: auto），这样就可以按照16:9的比例显示图片。

最后，使用CSS的居中对齐方法（text-align: center和vertical-align: middle）来实现图片在父元素中的居中对齐，同时使用max-height属性来限制图片最大高度不超过浏览器高度。

以下是示例代码：

HTML代码：

<div class="container">
  <img src="your_image_path" alt="your_image_description">
</div>

CSS代码：

.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 - 20px); /* 设置图片最大高度不超过容器高度减去一定的边距（20px） */
}

其中，calc()函数用于计算图片最大高度，减去20px的边距是为了避免图片超出容器底部。