怎么修改DIV宽度100%，背景图片居中并自适应宽度的css

最新推荐文章于 2021-06-17 14:56:00 发布
最新推荐文章于 2021-06-17 14:56:00 发布
阅读量2.5k 收藏 1
点赞数 1
分类专栏： Html+Div+Css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/romeoyue/article/details/51329858
版权
本文介绍了如何使用CSS让一个div的宽度100%自适应，并确保背景图片在其中居中显示，保持不偏移。通过设置div的样式和背景定位属性，成功解决此问题。
摘要由CSDN通过智能技术生成

网上网友分享的解决方案

<STYLE TYPE="text/css">

<!--
BODY {background-image: URL(photo/picture1.jpg);
最低0.47元/天 解锁文章
romeoyue
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 内容自适应居中对齐 弹性盒子
Shopify 开发者
03-25 821
使用 CSS3 的弹性盒子 实现内容完美自适应居中对齐，无需设置内容和父元素固定宽高
DIV在100%下iframe宽度高度的自适应的问题
ZH592677127的专栏
07-26 2万+
很多时候在做B/S后台系统的时候，一般管理页左边为管理菜单，右边为操作页面，为了维护方便通常会使用iframe来展示操作管理页面，显然用固定的宽度和高度并不能满足要求，经常我们需要让页面自动适应用户分辨率，提高用户体验。下面是可以自适应代码，网页表头声明为xhtml1-transitional.dtd才能支持。 main" src="aaa.html"  frameborder="0" he
html div is自适应,CSSHTML实现高度宽度自适应
weixin_39603598的博客
06-17 113
首先说明 auto 和 100%是不一样的,100%是根据元素的像素有关的,auto是自动的。举个例子:给box下添加一个div高度是100%,这时候div高度为box高度300px,这时候如果给这个div设置padding,那么这个div的高度等于box的高度+padding的像素之和。再说一个知识点:正常文档流下,块级元素的宽度等于父元素的宽度,高度为内容撑开的高度;内联元素的高度宽度都是内容...
如何让 height:100%; 起作用
Les étoiles的专栏
12-04 2149
当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？ 按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间
纯CSS实现Div高度根据自适应宽度（百分百调整）
weixin_33834075的博客
04-12 1251
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯CSS实现Div高度根据自适应宽度（百分百调整）</title> </head> <style> ...
css 水平居中，垂直居中，自适应宽度的代码
12-13
一、宽度自适应的元素水平居中： 　1.宽度自适应的元素可以是：绝对位定、浮动元素、行内元素。而我们通常布局，肯定不会用行内元素，所以会选择，绝对定位或浮动。 2.居中：这里我们应该会想到1/2、50%、一半等...
独行DIV自适应宽度布局CSS实例与应用范围
12-13
独行DIV自适应宽度布局CSS实例与扩大应用范围DIVCSS5先给大家介绍独立一列自适应宽度，也就是单独一行宽度自适应DIV的布局。通过DIV CSS实例CSS自适应宽度布局方法，再过常见用处介绍充分掌握自适应独占一行一列的...
div或img图片高度随宽度自适应的方法
12-28
二、我这次主要是用css来实现图片高度的自适应问题。 下面是所需要的代码 （这种方法是可以在图片上方垂直居中展示文字的，如果不需要可以选择最下方更简洁的代码） <div class=box> 行内元素垂直居中 <div class...
css自适应宽度 多种方法实现宽度自适应的水平居中
12-13
当父元素和子元素都没有定义宽度的情况下实现水平居中： display:inline-block 可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。 HTML代码: 复制代码代码如下: <div class=”...
html背景自动宽高,CSS设置背景图宽度100%，高度自适应
weixin_33840959的博客
05-31 1551
div的高度随背景图片的高度变化：原理是通过padding-top或者padding-bottom实现，值是背景图片的宽高比。高度设置为0..newcenter{width:100%;background:url('../../assets/img/newcenter.png')no-repeat;background-size:100%a...
CSS设置背景图宽度100%，高度自适应
dabao87的博客
04-23 2万+
.newcenter{ width: 100%; background: url('../../assets/img/newcenter.png') no-repeat; background-size: 100% auto; padding-top: 13%; height: 0px; } 原理是通过pa...
修改背景图片居中并自适应宽度的css
younger_z的专栏
02-17 5530
BODY {background-image: URL(photo/picture1.jpg);background-position: center;background-repeat: no-repeat;background-attachment: fixed;}-->
纯CSS控制背景图片100%自适应填充布局
热门推荐
淘淘小窝
01-18 21万+
原文:http://www.uedsc.com/css-background-size-100.html 解决: html,body{height: 100%;width: 100%;margin:0;padding:0;} body{ background:url(bg-login.png)no-repeat; width:100%; height:100%; ba
背景图片自适应大小(css3)
01-16 2万+
body {             background: url(/happytime/img/index.jpg) no-repeat center center fixed;              background-size: 100%;//此处要注意，可以填cover也可以填100%。建议填100%         }  备注：折腾了俩个多小时
如何在div中设置背景图片并且自适应div大小
weixin_43387852的博客
11-16 4万+
参考如下代码，设置背景图片的大小为100% 100%并且设置no-repeat 这样图片就能在div改变的情况下，仍然显示完全 <!DOCTYPE html> <html> <head> <style> #a { background-color: rgb(255, 208, 0); background-image: url("1.png"); backgrou
div背景图自适应占满
不明所以
01-11 3万+
background-image: url(../imgs/footerkuang.png); background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%;
外部div宽度为100%，内部div宽度也为100%，内部div整体水平居中
missing_IT的博客
11-10 1408
在vue中，从外部传入table，但是没有提供宽度任何样式信息使传入的html整个标签居中
html <div>标签内背景图片自适应div大小
m0_37828249的博客
10-29 10万+
只需通过css设置background-size属性为contain，即 background-size:contain 注意：一定要在先设置background之后再设置background-size属性，这样才有效
div的高度宽度自适应，内容自适应css3 如何实现
最新发布
06-05
要让 `div` 的高度宽度自适应，可以使用 CSS3 中的 `flexbox` 布局或 `grid` 布局。其中，`flexbox` 布局比较常用。 下面是一个简单的例子，实现了 `div` 的高度和宽度自适应，并且内容也自适应： ```html <div class="container"> <div class="content"> <!-- 这里是内容 --> </div> </div> ``` ```css .container { display: flex; /* 设置水平方向和垂直方向都居中 */ justify-content: center; align-items: center; } .content { /* 设置内容自适应 */ flex: 1; } ``` 在上面的例子中，父元素 `.container` 使用了 `flexbox` 布局，并且设置了水平和垂直方向都居中。子元素 `.content` 设置了 `flex: 1;`，表示让其自适应剩余空间。这样，无论 `.container` 的大小如何，都能保证 `.content` 元素的高度和宽度自适应。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值