background img属性与img标签问题

^sky^

于 2022-03-12 15:31:39 发布

阅读量967

点赞数

CC 4.0 BY-SA版权

分类专栏：编程开发文章标签： html css 前端

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

编程开发专栏收录该内容

8 篇文章

订阅专栏

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

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

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端 两者之间的切换，相当于两套模板了。