CSS设置背景图宽度100%，高度自适应

作者: chouchou723 | 来源:发表于2019-09-17 10:34 被阅读0次

CSS设置背景图宽度100%，高度自适应
css常见问题自用
CSS3实现常见的自适应布局，弹性布局
vw 单位 android 4.4 下的一个小bug
CSS 背景图宽度100% 高度自适应
高度塌陷
wepy小程序入门开发问题总结
css圆角框学习
用masonry自适应label高度和宽度
Day3 新闻列表页面

<div class="newcenter"></div>
.bg{
       width: 100%;
       background: url('./74123.jpg') no-repeat;
       padding-top: 40%;
/*background-size: 100% auto;
       height: 0px;*/
background-size:cover;
        background-position:center;
   }

padding-top= (高度/宽度)*100%;即图片的高度与宽度的比例,因此就能实现背景图宽度100%，高度自适应
为了达到更好的效果再配合cover和center

bgbg.png

CSS设置背景图宽度100%，高度自适应
padding-top= (高度/宽度)*100%;即图片的高度与宽度的比例,因此就能实现背景图宽度100%，高度...
css常见问题自用
内容居中 flex实现上下居中，最简单。背景图片自适应，宽度100%还是高度100%。 1920/1080是背景...
CSS3实现常见的自适应布局，弹性布局
CSS 右侧自适应宽度中间自适应宽度底部自适应高度注意： flex-direction: column;
vw 单位 android 4.4 下的一个小bug
CSS3 vw 单位 100vw = 100% 视窗宽度100vh = 100% 视窗高度这样实现自适应正方形(...
CSS 背景图宽度100% 高度自适应
div的高度随背景图片的高度变化：原理是通过padding-top或者padding-bottom实现，值是背景图...
高度塌陷
1、自适应宽高（1）块级元素宽度设置为100%，或者不设置，默认为父元素的宽（2）高度自适应：不设置父元素的高...
wepy小程序入门开发问题总结
1.图片宽度100%高度自适应问题我需要图片宽度撑满，高度自适应，然而图片宽度撑满了屏幕，但是高度为0 小程序i...
css圆角框学习
宽度固定高度自适应高度宽度自适应
用masonry自适应label高度和宽度
1.自适应宽度前提不需要设置label的宽度 2.label多行自适应高度
Day3 新闻列表页面
Swiper组件构建轮播图设置css样式时，注意设置在swiper-item上设置宽度（100%）和高度，同样的...