div的Img图片自适应容器的大小

最新推荐文章于 2024-03-14 13:41:51 发布

原创最新推荐文章于 2024-03-14 13:41:51 发布 · 3w 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#img #div #自适应大小

本文提供了两种实现图片自适应的方法。方案一通过设置图片的宽为100%，高为自动来实现。方案二则是将图片设为背景图，并通过body标签的样式属性设置背景图片的大小与显示方式。

废话不多说，让img图片自适应大小，网上东拼西凑得到了两套方案，且都能实行

方案一：只要设置了父容器的大小，那么img就会自适应大小

  <img src="../../libs/images/login.jpg" style="
                              width: 100%;
                              height: auto;
                                "/>

方案二：写了一个登录页面，所以登录页面的图片要是背景才对，一下代码完美解决问题。

<body  style="margin:0px 0px 0px 0px;background-attachment: fixed;background-size:100% 100%;background-image: url('../../libs/images/login.jpg');width: 100%;height: 100%;">