图片平铺整个浏览器页面

最新推荐文章于 2023-12-05 19:56:48 发布
最新推荐文章于 2023-12-05 19:56:48 发布
阅读量421 收藏
点赞数
分类专栏： HTML/CSS基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42666092/article/details/114683217
版权

1.直接对img标签进行设置，不是div；

<style>
    img {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top:0;
    }
</style>
<body>
    <img src="../images/item01.png">
</body>

2.给html,body设置背景图像；

   html.body {
        margin: 0;
        padding: 0;
        background: url(../images/item01.png) no-repeat;
        background-size: cover;
    }
werch
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js平铺图片
11-14
让当前页面的img标签平铺，可自己选择对象，用解决图片尺寸问题等。 话说我想设置免费，咋没有啊
HTML 图片平铺
weixin_47186832的博客
11-29 423
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>平铺小练习</title> <style type="text/css"> .box1{ width:990px; height.
实现图片平铺
weixin_42132044的博客
07-15 397
.container { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: url("../../assets/login_bg.jpg"); background-repeat: no-repeat; //不重复 background-position: center; background-size: cover; // 满屏 }
html图片平铺div,前端小知识——图片平铺问题
weixin_28803105的博客
06-05 6115
图片平铺有两种方式，直接写img标签或者通过background-image方式1，img标签HTML： CSS:.row{margin:0,auto;width:100%;}img{width:100%;height:100%;margin: 0 auto;display: block;font-size: 0;}这样写的话，三张图片能够垂直平铺，且随着浏览器的缩放而缩放，...
img图片实现背景图片的效果、img平铺、object-fit
qq_43515724的博客
05-05 6301
最近公司做了一个项目,当时用的img图片标签，做的是一个头像，一想到头像宽高不确定 又要铺满整个相框 还不能变形 和背景图片差不多，自己琢磨着写了半天的js,判断宽高呀啥的，能力不足，未果。。。 看了下菜鸟 看到了object-fit之后 感觉全世界都亮了 不多说了 直接看我写的 关键属性： object-fit: fill; object-fit: contain; object-fit:...
jQuery图片平铺效果制作网页背景图片平铺代码
11-12
例如，我们可以根据浏览器窗口的大小动态调整图片平铺，或者在用户滚动页面时改变背景图片。这需要利用jQuery的`$(window).resize()`和`$(window).scroll()`事件，以及`css()`方法来设置背景图片的样式。 以下是一...
body背景图片拉伸另类实现
09-25
`background-repeat`设为`no-repeat`防止图片平铺，`background-position`设为`100% 100%`使得图片填充整个容器的底部和右侧，实现类似拉伸的效果。 请注意，这种方法仅适用于Internet Explorer浏览器，对于现代...
html5背景图片自适应特效代码
03-20
在这个例子中，`background-image`属性设置背景图片的URL，`background-repeat`禁止图片平铺，`background-position`将图片居中，而`background-size: cover`则确保图片自适应并覆盖整个背景。 另外，为了使背景...
星空——登录页面
01-09
在这个星空背景的登录界面中，CSS3可能用于实现背景图片的平铺、透明度控制、动态效果（如星空闪烁）以及响应式设计，确保页面在不同设备上都能良好显示。 3. **JavaScript**: JavaScript是实现网页动态交互的关键...
通过优化网页页面降低对内存及CPU的占用
09-28
- 图片压缩：使用适当的图片格式（如JPEG、PNG或GIF），并调整图片质量以平衡视觉效果和文件大小。 - 对于小图标，使用更小的颜色深度（如128色而非256色）来减小文件大小。 - 控制Flash的性能：降低帧率，调整...
img图片自适应
08-26
htm页面图片自适应，在各个浏览器兼容，并且兼容分辨率！
css img宽高等比例平铺div，不变形解决办法。
天下大师傅
04-10 1万+
有两种解决办法第一种    父div 设置overflow: hidden;    img 标签设置 width: 100%;但是会有一个问题，高度大于父div时，会有部分被隐藏。第二种    解决办法出自 深圳前端交流群 （群号：247687975）深圳-旧城以西 。使用背景图片的方式，设置css3 background-size: cover;  官方解释是：把背景图片扩展至足够大，以使背景图...
svg中的image标签图片平铺处理
牟云飞的博客
07-14 4692
svg中嵌入image标签后，修改image标签大小，图片并不会拉伸， image标签中增加preserveAspectRatio="none" vector-effect="non-scaling-stroke"
img 自适应 横向铺满object-fit
最新发布
Alex81320的博客
12-05 491
img 自适应 横向铺满object-fit
CSS——图片平铺占满div且不变形
qq_43201350的博客
02-25 9314
img { width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat center; }
object-fit实现 img图片平铺
qq_42709302的博客
12-07 876
这个不仅仅是对img有用，还可以在video里面用 object-fit: fill; object-fit: contain; object-fit: cover; object-fit: none; object-fit: scale-down; fill 被替换的内容的大小，以填补该元素的内容框：对象的具体对象的大小是元素的使用宽度和高度。 contain 被替换的内容的大小，为自身宽高比不变，适应该元素的内容框的大小：它的具体对象的大小被解析为对元素的使用宽度和高度的含有约束。 cover 被替换
css 图片平铺和不平铺
热门推荐
10-30 3万+
估计也只有使用CSS来解决了。 　　在网上搜索了会，学了学，就搞定了，现将代码与大众分享： 　　以下的各种设置方法，均为通过修改网页BODY标签以达成目的！ 　　①完全平铺 　　 　　②水平方向平铺 　　 　　③垂直方向平铺 　　 　　④不平铺 　　        这样不会起作用 这样才起作用
怎么让图片平铺 传进来的图片自适应这个div
若星汉灿烂
10-12 2万+
1.html <div id="bo"> <img src="imgs/1.jpg"> </div> css #bo{ display:inline-block; width:100%;/*图片自适应的父容器的宽*/ height:100%;/*图片自适应的父容器的高*/ } #bo img{ width:100%; height:100%; } ...
img video以短边为准平铺，裁剪
weixin_45422787的博客
02-21 1071
当视频或者img太高或者太宽的时候，不想让全部100%比例显示，但是又想把中间的内容居中显示，裁剪长边， html <div class="contain"> <div class="box"> <div class="content"> <img class="img" src="https://mmm-jyj.oss-cn-hangzhou.aliyu
如何使图片水印平铺到整个页面
06-10
要使图片水印平铺到整个页面，可以通过以下步骤实现： 1. 使用CSS将要设置为水印的图片作为背景图像添加到body元素上，同时设置background-repeat属性为repeat或者repeat-x/repeat-y。 2. 设置背景图像的透明度，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值