在網(wǎng)頁開發(fā)中,圖片自適應和全屏展示是非常常見的需求。HTML 提供了若干種方式來實現(xiàn)這些特性。
下面是一個 HTML 代碼示例,用來實現(xiàn)一張圖片自適應并全屏展示的效果:
<style> .image-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 9999; background-color: rgba(0, 0, 0, 0.8); } .image-wrapper img { max-width: 100%; max-height: 100%; } </style> <img src="path/to/image.jpg" onclick="showImage(this)"> <script> function showImage(img) { var wrapper = document.createElement('div'); wrapper.className = 'image-wrapper'; wrapper.onclick = function() { document.body.removeChild(wrapper); } var image = document.createElement('img'); image.src = img.src; wrapper.appendChild(image); document.body.appendChild(wrapper); } </script>
上面的代碼使用了 CSS 的 flex 布局來將圖片水平和垂直居中,并使用了半透明的黑色背景色增強了效果。同時,使用 JavaScript 動態(tài)生成了一個 div 元素來包裹圖片,并注冊了點擊事件,點擊外部區(qū)域可關(guān)閉全屏展示。
這是一個比較簡單且兼容性較好的圖片自適應全屏展示方案,當然還有其他方案可以實現(xiàn)類似效果。