background img属性与img标签问题

最新推荐文章于 2025-10-28 18:30:48 发布

转载最新推荐文章于 2025-10-28 18:30:48 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://www.php.cn/blog/detail/23609.html

文章标签：

#html #css #前端

编程开发专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何解决网页背景图片因尺寸过大导致显示不全的问题，使用CSS的`background-size:100% 100%`属性实现全屏显示，但可能会造成图片变形。同时，针对移动端图片自适应，通过媒体查询(`@media screen and (max-width: 750px)`)设置图片宽度为100%，保持高度自动调整，确保在不同屏幕尺寸下图片能正确显示。

1.解决background中图片太大只显示一部分

div {
   background-image: url('路径');
   background-repeat:no-repeat;
   background-size:100% 100%;
   -moz-background-size:100% 100%;
}
注意：虽然自适应屏幕，但是图片会变形！

2、移动端图片自适应

@media screen and (max-width: 750px) {
     img
        {
            width: 100%;
            height:auto;
            background-color: crimson;
            display: block;
        }

        }
        
        这里用到是媒体查询 ，作用是观察屏幕宽度， 当宽度达到我们设置的值，他会根据我们所设置 id class 标签等，改变他们的属性值 ，这种方法，我是用来应对，移动端和pc端 两者之间的切换，相当于两套模板了。