当前位置：首页 > 行业动态 > 正文

html5图片满屏

实现HTML5图片满屏需设置` 宽高为100%，配合body,html{margin:0;padding:0;width:100%;height:100%} ，并添加 适配移动端，或使用background-image

HTML5实现图片满屏的多种方法

CSS基础实现

方法 核心代码 特点
设置width:100% img { width: 100%; height: auto; } 简单易用，保持图片宽高比
使用background-size body { background: url(img.jpg) no-repeat; background-size: cover; } 适合背景图，自动裁剪填充
object-fit属性 <img src="img.jpg" style="width:100%; height:100vh; object-fit:cover;"> 保持比例裁剪，现代浏览器支持

视口单位适配

<img src="img.jpg" style="width:100vw; height:100vh; object-fit:cover;">
  • vw/vh：视口宽度/高度单位
  • object-fit:cover：保持比例裁剪填充
  • 优势：自动适应各种屏幕尺寸

JavaScript动态控制

window.addEventListener('resize', function(){
  var img = document.getElementById('fullscreen');
  img.style.width = window.innerWidth + 'px';
  img.style.height = window.innerHeight + 'px';
});
  • 监听窗口大小变化
  • 动态设置图片尺寸
  • 注意：需配合initial-scale控制缩放

响应式布局方案

技术 实现要点
Flex布局 display:flex; justify-content:center; align-items:center;
Grid布局 设置图片为grid-area填充容器
百分比容器 父容器设固定比例（如padding-bottom:56.25%）

图片优化技巧

  1. 格式选择：优先使用WebP格式（需检测浏览器支持） 
    <picture>
  <source type="image/webp" srcset="img.webp">
  <img src="img.jpg" alt="">
</picture>
  2. 懒加载： 
    <img loading="lazy" src="img.jpg" alt="">
  3. 压缩处理：使用TinyPNG等工具压缩至200KB以下

常见问题与解答

Q1：如何保证图片不变形？

html5图片满屏 第1张

  • 使用object-fit:contain;保持原始比例
  • 或设置background-size:contain;（背景图模式）
  • 注意：此时可能出现留白区域

Q2：移动端适配需要注意什么？

  1. 添加viewport meta标签： 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  2. 使用rem单位适配字体： 
    body { font-size: 14px; } / 基准字体 /
  3. 禁用双击缩放： 
    <meta name="viewport" content="user-scalable=no">
0

相关文章