怎么让一张图片填满整个div

最新推荐文章于 2024-10-09 08:55:16 发布

three_hours

最新推荐文章于 2024-10-09 08:55:16 发布

阅读量9.6k

点赞数 7

CC 4.0 BY-SA版权

文章标签： html

本文链接：https://blog.youkuaiyun.com/weixin_41814742/article/details/119650663

本文介绍了两种方法使图片充满div元素：一是通过设置img标签的宽高为100%，二是使用背景图片并设置background-size为100% 100%。这两种方法都能确保图片在div中自适应填充，无论div尺寸如何变化，图片都不会失真。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：

怎么让一张图片填满整个div

两种方式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>怎么让一张图片填满整个div</title>
</head>
<body>
  <!--第一种方式：无论我的宽度怎么改变，图片的元素只是被拉伸，图片元素不会丢-->
  <div class="div1" style="width: 100%;height: 500px; border: 1px solid black">
    <img src="./image/avatar.png" alt="handsome" style="width: 100%; height: 100%">
  </div>
  <br/>
  <!--第二种方式，与第一种方式达到一样的效果 -->
  <div class="div1" style="width: 100%;height: 500px; background-image: url(./image/avatar.png);
                            background-size: 100% 100%; background-repeat: no-repeat">
  </div>
</body>
</html>