css设置盒子自适应宽度或高度

已于 2022-12-18 20:56:32 修改
阅读量5.1k 收藏 8
点赞数 4
分类专栏： css 文章标签： html css 前端
于 2022-12-18 20:52:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42596287/article/details/128365724
版权

1、自适应宽度

如上图，当右边的盒子内容超出容器的宽度，设置width：0；超出的内容就可以隐藏，或者设置overflow：auto；会出现滚动条显示。

2、自适应高度

 如上图，要使下面的盒子高度撑满剩余的空间，可以使用flex布局，然后设置如图所示样式就ok了。

（width和height不一定要设置为0，只要不大于剩余空间的大小。）

北极之光_
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css和css3弹性盒模型实现元素宽度（高度）自适应
01-19
一、css实现左侧宽度固定右侧宽度自适应 1、定位 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>自适应</title> <style> *{ padding: 0; margin: 0; } .left{ background: red; width: 200px; height: 200px;
纯CSS实现图片自适应容器大小
weixin_46769087的博客
11-10 2515
图片自适应DIV盒子的大小，根据浏览器窗口大小，自动更改图片大小
css实现图片自适应容器的几种方式_css&lt；img&gt；大小自适应
最新发布
2401_84715691的博客
05-15 993
这种图片比容器小的情况强行将图片自适应的话图片就失真。但经常会遇到接口获取的不规则图片的情况，一般这种时候会将小于容器的话将其水平、垂直居中。属性就能进一步优化图片的宽高都小于容器的情况了。max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。这是正常的佩琪（如果图片比容器大的话，图片会超出容器）
css实现图片自适应容器的方法
tianxianghuiwei的博客
11-24 1528
max-width:100%和width:100%的区别在于,max-width是相对于img自身的尺寸而言的。而width的100%我们上面已经说过了是相对于父级宽度的，所以为了不让图片被放大后失真我们可以设置img的最大宽度为自身尺寸大小，更通俗的讲就是只允许缩小不允许放大img。不管容器有多大，只要将img的宽高设置成100%（这里的100%是相对于父级宽高而言）就能自适应容器大小。那是不是就这这么简单完事儿了呢？假如你介意 图片放大后会失真，我们可以改进上面的代码，只需要将img的样式简单修改。
前端css实现左侧盒子宽度固定，右侧宽度自适应布局
热门推荐
来一颗砂糖橘
04-28 2万+
前端css实现左侧盒子宽度固定，右侧宽度自适应布局
CSS：宽高自适应详解
ZJH_are的博客
07-17 9187
2.选择器before{content''}表示在xx之前添加内容,必须要和content一起搭配使用,可以不写任何内容。1.选择器after{content''}表示在xx之后添加内容,必须要和content一起搭配使用,可以不写任何内容。-【重要】当块级元素脱离文档流的时候,宽度由内容决定=>设置浮动和定位的盒子一定记得要加宽高大小！-浏览器的高度默认是0,html,body{height100%}-HTML,BODY表示浏览器,默认是块级元素,宽度是100%...
div或img图片高度随宽度自适应的方法
12-28
一、可以使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度（这里就不具体为大家细说了）。 利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度，不能随着浏览器的窗口大小变化来...
div+css菜单导航布局自适应宽度
12-20
- **Flexbox**（弹性盒子布局模块）：Flexbox允许我们在一行或一列中灵活地排列元素，无论元素数量如何，都可以轻松实现等宽或自适应宽度的布局。 - **Grid布局**：CSS Grid提供了二维布局系统，可以更精细地控制...
CSS实现宽度自适应宽高16:9的矩形的示例
01-18
第一步先计算高度，假设宽100%，那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 <style> *{ margin: 0px; padding: 0px; } /* .wrap:包裹矩形的div，用来控制矩形的...
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
01-19
在前端页面布局中，经常会碰到要让容器充满整个屏幕高度或者剩余屏幕高度的需求。...你没看错，只需要这一个属性就可以办到，vh 是一个新的单位，表示的是屏幕的高度，还有一个对应的宽度属性 vw，
css如何让图片自然布满盒子且不出现变形
一句话介绍不了
03-08 5877
html部分: <div clas="box"> <img src = "xxx" /> </div> css样式 width: 400px; height: 400px; display: flex; justify-content: center; align-items: center; border: 1px soli
css正方形盒子 自适应
weixin_30275415的博客
03-22 171
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ ...
css样式怎么解决div盒子宽度随着变化而变化，css样式怎么实现响应式，自适应。
GF1837050的博客
09-15 2593
在前端工程师编写网页时最困扰的事情就是数据交互和页面自适应。什么是页面自适应? 自适应是什么? 页面自适应就是一个网页可以在不同大小的窗口不同的设备都完整的显示同一个网页。 解决方法 css样式中可以使用fiex部件（粘性布局），百分比布局，rem布局来实现网页自适应。 fiex布局 flex布局属性大全 百分比布局 div { padding: 50%; } div { height: 50%; } div { width: 50%; } re
CSS盒模型自适应布局——calc与box-sizing
m0_49662897的博客
03-07 1440
CSS盒模型自适应布局——calc与box-sizing
CSS图片自动适应大小
courseware的专栏
12-02 3333
图片自动适应大小的问题在平时制作的时候是比较常见的问题，下面提供一个比较简单的解决方法：div img { max-width:600px; //IE7、FF等其他非IE浏览器下最大宽度为600px; width:600px; //所有浏览器中图片的大小为600px; width:expression(document.body.clientWidth>600?"600px":"auto"
css 让一个盒子的高度自适应屏幕剩余的部分
在线学习web前端开发教程
01-03 1810
在项目中，移动端要自适应，由于有时候数据不够，所以导致了有的区域空白 要求：没有数据的时候能够充满屏幕，数据超出屏幕就出现滚动条 做法 1-让容器高度充满这个屏幕 在容器内容很少的情况下，要想让这个容器充满整个屏幕： `.container{ min-height:100vh; display:flex }` 2-让容器高度充满剩余屏幕高度 要让容器充满屏幕的剩余高度，用 vh 结合 fl...
CSS实现自适应高度布局：头部底部固定，中间自适应铺满屏幕剩余高度，中间盒子里左盒子固定右盒子自适应宽度
liona_koukou的博客
09-26 2万+
如题：顶部底部固定高度，中间部分铺满屏幕剩余高度，中间盒子里又左盒子固定宽度，右盒子自适应宽度且距左盒子总是20px 主要解决方法是中间盒子的top:40px;bottom:40px;设置。原理是在position是absolute时同时设置top和bottom或者同时设置left和right，高度或宽度会被拉伸到指定位置 如图： 实现代码：     &lt;!DOCTYPE...
怎么让盒子自适应宽度且居中
09-08
要实现盒子自适应宽度且居中，首先需要设置盒子的宽度为自适应的，可以使用CSS中的`width: auto;`来实现。这样盒子的宽度将会根据其内容的大小来自动调整。 接下来，为了实现居中布局，可以使用CSS中的`margin`属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值