图片怎么通过样式全屏显示

可以通过以下步骤实现图片全屏显示：

1. 在HTML中添加一个div元素来包含图片

<div class="fullscreen">
  <img src="your-image.jpg" alt="your image">
</div>

2. 在CSS中设置div元素的样式，将其充满整个屏幕

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreen img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

解释一下CSS的样式设置：

- `position: fixed` 表示将元素固定在屏幕上，不随滚动条滚动
- `top: 0; left: 0; right: 0; bottom: 0;` 表示将元素的上下左右边缘都设置为0，充满整个屏幕
- `z-index: 99999` 表示将元素的层级设置为最高，使其覆盖其他元素
- `background-color: #000` 表示将元素的背景色设置为黑色，使图片展示时背景为黑色
- `display: flex; justify-content: center; align-items: center;` 表示将元素内部的内容水平和垂直居中
- `max-width: 100%; max-height: 100%; object-fit: contain;` 表示将图片的宽度和高度都设置为100%，并保持原始比例，同时将图片居中显示。如果想要图片填满整个屏幕，可以将`object-fit`设置为`cover`。

这样设置后，当用户点击图片时，图片就会全屏显示。