CSS 的奇技工巧：4行属性写出等比例盒子

tuomao 发布于2019-08-30 14:16 / 3485人阅读

摘要：一个项目中需要用到一个广告位的轮播图效果，而这个轮播图位置需要根据不同设备的尺寸进行缩放从而保持相同的比例。但是其中值得思考的东西颇多，不妨读者也想一想为什么父元素的属性要设置为子元素为什么不设置属性注意属性的继承关系

一个项目中需要用到一个广告位的轮播图效果，而这个轮播图位置需要根据不同设备的尺寸进行缩放从而保持相同的比例。

最开始使劲琢磨发现用 width + height 属性是实现不了这种效果的，非得用 JS 才能达到这种效果吗？终于发现有前人早已解决过这个问题，这里权当自己吸收学习，因此记录下来。

HTML

CSS

.box
{
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}

img
{
    width: 100%;
}

演示效果

仔细想一想这不过是 CSS 中最基础的内容，没有什么新颖华丽的内容。但是其中值得思考的东西颇多，不妨读者也想一想：

为什么父元素 .box 的 height 属性要设置为 0

子元素 img 为什么不设置 height 属性

注意

padding 属性的继承关系

云服务器 GPU云服务器等比例等比例缩放图片 php等比例缩放 html 图片等比例

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

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

CSS入门

CSS介绍 CSS：层叠样式表：Cascading Style Sheets：修改HTML样式 CSS引用 DOCTYPE html> 引用CSS p { color: red; } 引用样式 CSS选择器 DOCTYPE html> ...

番茄西红柿 2019-04-23 13:32 评论0 收藏0
css3 flex弹性盒子布局梳理，打通任督二脉

摘要：挺早就接触了的布局，深入使用也就是在近期移动端开发。属性用于设置或检索弹性盒模型对象的子元素如何分配空间。所以，项目之间的间隔比项目与边框的间隔大一倍。默认值是，也就是不进行缩放，占原来元素内容宽度大小。　　挺早就接触了css的flex布局，深入使用也就是在近期移动端开发。老来多健忘，只能自己梳理一下知识点，当做温故知新吧。，请原谅小白的才疏学浅，写的不到位的地方请指正。　　flex属性...

Yumenokanata 2019-04-23 13:09 评论0 收藏0
CSS 高度(css height)

摘要：同时也无需使用来实现高度自适应。通常默认情况下不用再设置高度值为，对象高度即是自适应高度。高度不能设置百分比高度如设置百分比的高度无效。扩展阅读宽度最小高度最大高度转载来源网址DIV+CSS height高度知识教程篇 DIV CSS高度简介这里的CSS高度是指通过CSS来控制设置对象的高度。使用CSS属性单词height。单位可以使用PX，em等常用使用PX（像素）为html单位。 he...

sf_wangchong 2019-04-23 13:13 评论0 收藏0
快应用采坑与flex布局讲解

摘要：下面介绍有关的一些常用基本属性是定义主轴的方向，常用的有，。就直接讲一个稍微难一点的例子如果需要实现上面的情况，那么代码如下更多的就需要自己去探索，这里就不一一讲解了。快应用之flex布局在我们常用的布局中有display + position + float进行布局，但是这些布局或多或少都有些麻烦（虽然我最喜欢用position,哈哈啥都能干)。但是由于快应用只能够使用flex布...

chnmagnus 2019-08-22 18:27 评论0 收藏0