html背景图片自适应屏幕

最新推荐文章于 2022-12-09 18:00:57 发布
最新推荐文章于 2022-12-09 18:00:57 发布
阅读量1.2k 收藏 4
点赞数 1
分类专栏： 三创赛网站搭建学习 文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45938469/article/details/122837044
版权

由于图片与屏幕尺寸不匹配或希望在各种设备上正常显示，问题如下：

问题代码

  <img src="la.png" />

在这里插入图片描述

整个图片塞不下

解决方法：

法1

<body style="background-image: url(la.png); background-size: 100%;">

在这里插入图片描述

法2

<img src="la.png" style="height: auto; width: auto; width:100%;" />

在这里插入图片描述

总结

对于png,jpeg类型的静态图片，使用法1效果较好；对于gif一类动图法2更合适。
马卡卡的小店
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML中使背景图片自适应浏览器大小实例详解
08-30
主要介绍了HTML中使背景图片自适应浏览器大小实例详解的相关资料,需要的朋友可以参考下
HTML中的图片如何自适应屏幕？这篇文章有图片的自适应用法介绍
lin123_00的博客
05-27 2万+
首先我们看看HTML中的图片是如何自适应屏幕的： 让图片自适应屏幕大小最简单的方法，保证管用，你把那个图片写在div里面的背景里，也就是background:url(../img/1.jpg) center no-repeat; 这样就能够自适应屏幕大小了，而且不会出现横向的滚动条 首先是设置background:url(图片地址) 0 0 no-repeat scroll transparent;background-size:100% 100%; 打造全网web前端全栈资料库（总目录）看完学的更
html <div>标签内背景图片自适应div大小
热门推荐
m0_37828249的博客
10-29 10万+
只需通过css设置background-size属性为contain，即 background-size:contain 注意：一定要在先设置background之后再设置background-size属性，这样才有效
html背景图片自适应
zb0567的专栏
08-08 6240
只需将以下代码复制到页面标签下面即可实现，当然了如果你的大图超大放到空间里面下载很慢，你可以把图片放到百度开发中心BAE里面去，就如我站现在的这些大图都是放在BAE里面托管的。 如果使用加入此代码后，请取消CSS样式中body标签处的背景样式，另外此效果不支持IE6浏览器。
HTML 设置背景图片自适应
wulala37的博客
04-02 6778
HTML 设置背景图片自适应 background: url(xxx.png) no-repeat fixed; background-size:100% 100%;
html5背景图片自适应特效代码
03-20
HTML5背景图片自适应特效是现代网页设计中一个常见的需求，尤其在响应式网页设计中尤为重要。这种特效允许背景图片根据浏览器窗口的大小自动调整，从而确保无论在何种设备上，图片都能完美填充整个背景区域，同时...
html5背景图片自适应代码
04-06
HTML5背景图片自适应技术是现代网页设计中的一个重要特性，它允许网页的背景图片根据不同的设备屏幕尺寸和分辨率自动调整，以实现最佳的视觉效果。这个特性尤其在响应式设计中发挥着关键作用，确保了在手机、平板...
html5背景图片自适应代码.zip
11-18
在HTML5中，背景图片自适应是一个常见的需求，特别是在响应式设计中，为了确保网站在不同设备和屏幕尺寸上都能呈现出良好的视觉效果。这个压缩包"html5背景图片自适应代码.zip"包含了实现这一功能的相关代码示例。...
CSS实现网页背景图片自适应全屏的方法
12-09
这样的CSS设置，可以让背景图片自适应屏幕大小，无论用户使用的是大屏显示器还是小屏幕设备，背景图片都能完美铺满屏幕且保持比例，不会随页面滚动而滚动。同时，最小宽度设置确保了在小屏幕设备上图片的清晰度，...
js解决div内图片自适应大小
01-23
纯js实现在img图片大小未知，div大小未知的情况下，让图片自适应大小,需要的朋友可以参考下 已测试，兼容火狐，谷歌，IE6，IE7/8
html设置背景图片自动适应屏幕大小,css适应屏幕 CSS背景图片自适应屏幕大小
weixin_32066337的博客
05-31 4762
怎么屏幕自适应？？？？？ 我全用了margin的百分比但依旧达不到自适应的/* 打印样式 */ @media print { color: red; } /* 手机等小屏幕手持设备 */ @media screen and (min-width: 320px) and (max-width: 480px) { body { background: yellow; } } /* 平板之类的宽度 10...
Html-根据不同的分辨率设置不同的背景图片
weixin_33726943的博客
10-15 1901
@mediaonlyscreenand(min-width:1024px) //当分辨率width>=1024px时使用1.jpg作为背景图片 { .bg{ 　　background:url(./images/1.jpg)no-repeat; 　} } @mediaonlyscreenand(min-width:400p...
解决html中图片自适应屏幕大小的问题
weixin_43860634的博客
09-28 992
【代码】解决html中图片自适应屏幕大小的问题。
css实现图片显示器功能
lxf544207706的专栏
10-09 545
HTML:                                                                                                                              CSS:*{margin:
html语言设置网页背景,HTML+CSS入门 设置网页中的背景图片的5个属性
weixin_29793473的博客
05-31 3835
本篇教程介绍了HTML+CSS入门 设置网页中的背景图片的5个属性，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。<在css代码中设置背景图片的方法，包括背景图片、背景重复、背景固定、背景定位等用css设置网页中的背景图片，主要有如下几个属性：1，背景颜色{">说明：参数取值和颜色属性一样注意：在HTML当中，要为某个对象加上背景色只有一种办法，那就是先做一个表格，...
html图片自适应屏幕大小
weixin_42657666的博客
08-14 9683
在开发网页时，我们经常会遇到需要根据不同分辨率的手机适配图片大小的情况。这篇文章将介绍如何使用CSS3的属性来实现这个目标。
HTML里的图片高度固定，宽度自适应
最新发布
m0_58565372的博客
12-09 1752
注：background-size：contain;// 缩小图片来适应元素的尺寸（保持像素的长宽比），是图片宽高最长的那个边覆盖元素一边即可；需求：图片的高度固定，宽度需自适应，保证图片在缩小的情况下不失帧。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值