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

最新推荐文章于 2023-03-29 09:53:55 发布
最新推荐文章于 2023-03-29 09:53:55 发布
阅读量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
关注
专栏目录
css 水平居中，垂直居中，自适应宽度的代码
12-13
一、宽度自适应的元素水平居中： 　1.宽度自适应的元素可以是：绝对位定、浮动元素、行内元素。而我们通常布局，肯定不会用行内元素，所以会选择，绝对定位或浮动。 2.居中：这里我们应该会想到1/2、50%、一半等...
DIV在100%下iframe宽度高度的自适应的问题
ZH592677127的专栏
07-26 2万+
很多时候在做B/S后台系统的时候，一般管理页左边为管理菜单，右边为操作页面，为了维护方便通常会使用iframe来展示操作管理页面，显然用固定的宽度和高度并不能满足要求，经常我们需要让页面自动适应用户分辨率，提高用户体验。下面是可以自适应代码，网页表头声明为xhtml1-transitional.dtd才能支持。 main" src="aaa.html"  frameborder="0" he
div设置了居中和宽度，但是显示时宽度占100%
weixin_30235225的博客
09-30 86
<div id="bigDiv" align="center"> <div id="bottom" style="width: 960px;padding-bottom: 20px;background-color:#6FC;font-size:16px;" align="center"> show </div&gt...
CSS 背景图片适应分辨率全屏居中
03-21 1437
bak{ position: relative; overflow: hidden; width: 1920px; height: 876px; line-height: normal; margin-left: 50%; left: -960px; background-attachment: scroll; background-color: #FFFFFF; background-image...
背景图片居中全屏自适应显示
jay_888的博客
09-07 556
body{ overflow: hidden; width:100%; height:100%; background: url(“../images/11.jpg”) no-repeat; background-size: cover; background-position:center; background-att...
css使宽度不是100%的div居中的简单方法
xj的word之路
09-25 500
css使宽度不是100%的div居中的简单方法很简单 ，使用margin:auto 0;即可 很简单 ，使用margin:auto 0;即可
css自适应宽度 多种方法实现宽度自适应的水平居中
09-25
在现代网页设计中，实现内容的自适应宽度并进行水平居中是一个非常常见且实用的需求。自适应布局能够使网页更加灵活，能够适应不同尺寸的屏幕，提高用户体验。本文将详细讲述几种实现自适应宽度水平居中的CSS方法。 ...
独行DIV自适应宽度布局CSS实例与应用范围
12-13
独行DIV自适应宽度布局是CSS布局中一种重要的技术，主要应用于创建响应式网页设计，以确保内容在不同屏幕尺寸下都能良好展示。在这样的布局中，DIV元素的宽度不是固定不变的，而是根据其所在容器的大小动态调整。这...
html div is自适应,CSSHTML实现高度宽度自适应
weixin_39603598的博客
06-17 121
首先说明 auto 和 100%是不一样的,100%是根据元素的像素有关的,auto是自动的。举个例子:给box下添加一个div高度是100%,这时候div高度为box高度300px,这时候如果给这个div设置padding,那么这个div的高度等于box的高度+padding的像素之和。再说一个知识点:正常文档流下,块级元素的宽度等于父元素的宽度,高度为内容撑开的高度;内联元素的高度宽度都是内容...
html背景自动宽高,CSS设置背景图宽度100%，高度自适应
weixin_33840959的博客
05-31 1566
div的高度随背景图片的高度变化：原理是通过padding-top或者padding-bottom实现，值是背景图片的宽高比。高度设置为0..newcenter{width:100%;background:url('../../assets/img/newcenter.png')no-repeat;background-size:100%a...
html+css 背景图片铺满并居中
qq_38004125的博客
08-19 3906
html代码 <div class="main-page"> </div> scss代码 从代码中我们可以看到， .main-page{ background: url('背景图片路径')no-repeat top center; position: relative; height:需要的高度px; overflow: hidden; }
纯CSS实现Div高度根据自适应宽度（百分百调整）
weixin_33834075的博客
04-12 1263
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>纯CSS实现Div高度根据自适应宽度（百分百调整）</title> </head> <style> ...
css 背景图完全显示,使用CSS设置背景图片，图片比较大，怎么完全显示在一个DIV中？_html/css_WEB-ITnose...
weixin_32246721的博客
08-04 1766
意思是图片是500*500的，而DIV是100*100，那如何设置为背景图片，并且显示图片的全部内容呢？我在JS中是这样写的：b.style.backgroundImage="url('1.jpg')";b.style.width="100px";b.style.height="100px";图片能显示，但是没有显示完全，说明上面设置的高度与宽度没有效果这个要如何写呢？回复讨论(解决方案)b.st...
CSS 内容自适应居中对齐 弹性盒子
Shopify 开发者
03-25 842
使用 CSS3 的弹性盒子 实现内容完美自适应居中对齐，无需设置内容和父元素固定宽高
css设置背景图片居中
最新发布
zh_chong的博客
03-29 1547
【代码】css设置背景图片居中。
如何让 height:100%; 起作用
Les étoiles的专栏
12-04 2183
当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？ 按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间
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 5556
BODY {background-image: URL(photo/picture1.jpg);background-position: center;background-repeat: no-repeat;background-attachment: fixed;}-->
使用div+css实现图片背景居中登录页面
接着，设定`width`和`height`以适应图片尺寸，并通过负的`margin-top`和`margin-left`值（分别是div高度和宽度的一半）来确保图片内容居中。最后，使用`background`属性设置背景图片，`background-repeat:no-repeat`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值