资讯专栏INFORMATION COLUMN

让盒子的高跟随设备的宽而定

fuchenxuan / 2364人阅读

摘要:样式布局时,背景图,外盒子,内图片,盒子的宽不能将高度写死,希望高度跟随设备的宽而定外层相对定位,高度为零,内层绝对定位,宽高,将外层撑开。

css样式布局时,

背景图,外盒子,内图片,

盒子的宽100%; 不能将高度写死, 

希望高度跟随设备的宽而定:

外层相对定位,高度为零,padding-top:100%;

内层绝对定位,宽高100%,将外层撑开。

 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1581.html

相关文章

  • 实现图片恒定宽高比属性 — intrinsicsize

    摘要:开发中可能会遇到这样的需求一个响应式页面,它的图片宽度是随页面大小变化的,并且图片高度和宽度要保持固定的比率。 开发中可能会遇到这样的需求:一个响应式页面,它的图片宽度是随页面大小变化的,并且图片高度和宽度要保持固定的比率。(这里假设图片是 下面是对比,试着改变预览区大小,可以看到图片的变化是一样的https://jsbin.com/zoxixiwefa/... 比较常用的场景是卡片式...

    loonggg 评论0 收藏0
  • CSS再深入5(更新中···)

    摘要:页面布局结构层搭我们的页面框架。不需要使用浮动解决的问题尽量不用。使用浮动之后会使该元素脱标,宋体并且该元素的宋体。备注以后我们做定位的时候,尽量保持子绝父相。宋体宋体是一种协议,就是客户端和服务端链接的一种协议。页面布局 结构层:搭我们的页面框架。 布局层:针对框架内部结构进行排版。 不需要使用浮动解决的问题尽量不用。 使用浮动之后会使该元素脱标,并且该元素的margin。 div 盒子模...

    番茄西红柿 评论0 收藏0
  • CSS常用单位 %和 vw vh 和 box-sizing:border-box; 和flex

    摘要:一理解号是中的常用单位,它是相对于父容器而言的。效果图利用设置了的宽代码二理解这俩个单位是相对于视口的大小而定的。效果图代码弹性盒布局 一、% 理解: %号是CSS中的常用单位,它是相对于父容器而言的。如:一个父容器的宽是100px,给它的子元素一个10%,那么子元素的宽就是100px的10% 10px。 效果图: (利用%设置了li 的宽)showImg(https://seg...

    lordharrd 评论0 收藏0
  • CSS常用单位 %和 vw vh 和 box-sizing:border-box; 和flex

    摘要:一理解号是中的常用单位,它是相对于父容器而言的。效果图利用设置了的宽代码二理解这俩个单位是相对于视口的大小而定的。效果图代码弹性盒布局 一、% 理解: %号是CSS中的常用单位,它是相对于父容器而言的。如:一个父容器的宽是100px,给它的子元素一个10%,那么子元素的宽就是100px的10% 10px。 效果图: (利用%设置了li 的宽)showImg(https://seg...

    sunny5541 评论0 收藏0
  • 前端分享

    摘要:根据网页主要有三部分组成结构表现和行为。要想制作符合标准的页面,一个必不可少的关键组成部分就是声明。行内元素行内元素又称内联元素。当前,大部分门户网站大部分企业的宣传站点都采用了这种布局方式。 1 前言 1-1 W3C标准 W3C标准,既一系列标准的集合,他的本质是结构标准语言。就像平时使用的HTML,CSS等都要遵守这些标准。我们这里只讨论W3C网页标准。根据网页主要有三...

    Eidesen 评论0 收藏0

发表评论

0条评论

fuchenxuan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<