HTML5提供了許多有趣的功能，其中一個是允許用戶將圖像全屏顯示。在這里，我們將介紹幾種代碼，使您的圖片便于全屏查看。

//1.使用CSS
<style>
#fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 9999;
}
</style>
<img onclick="showFullscreen('yourImage.png')" src="yourImage.png">
<script>
function showFullscreen(imageSrc) {
var image = document.createElement('img');
image.src = imageSrc;
image.id = 'fullscreen';
document.body.appendChild(image);
}
</script>
//2.使用JavaScript
<script>
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
if (document.exitFullscreen) {
document.exitFullscreen(); 
}
}
}
</script>
<img onclick="toggleFullScreen()" src="yourImage.png">
//3.使用HTML5全屏API
<script>
function toggleFullScreen() {
var image = document.getElementById('yourImage');
if (image.requestFullscreen) {
image.requestFullscreen();
} else if (image.mozRequestFullScreen) { /* Firefox */
image.mozRequestFullScreen();
} else if (image.webkitRequestFullScreen) { /* Chrome, Safari and Opera */
image.webkitRequestFullScreen();
} else if (image.msRequestFullscreen) { /* IE/Edge */
image.msRequestFullscreen();
}
}
</script>
<img onclick="toggleFullScreen()" src="yourImage.png" id="yourImage">

您可以根據(jù)自己的需求選擇這些不同的選項。請記住，有許多其他的可自定義選項，可以根據(jù)自己的需求調(diào)整。