css 不规整元素的宽高等比例

laoLiueizo 发布于2019-08-30 13:02 / 2789人阅读

摘要：不规整元素的宽高等比例在不同屏幕情况中不同宽高的元素都以相同等比例等宽和等高方式展示。规定基于父元素的宽度的百分比的内边距。

不规整元素的宽高等比例

在不同屏幕情况中不同宽高的元素都以相同等比例、等宽和等高方式展示。

需求

设计师希望页面的图片区域，以宽高为2:1比例且所有图片的等宽和等高的方式展示。小加同学觉得设计师这需求太容易，分分钟搞定，拿到图片后便开始刷刷的撸代码。原型设计稿大致如下:

bootstrap 栅格系统 思路

每个图片区域宽度为父元素宽度的25%，图片的宽度设置100%，其高度根据宽度等比例自动缩放（小加以为图片的宽高应该是同比例的），这样就可以适应屏幕达到要求咯～

HTML

</>复制代码 
  
    初版

CSS

</>复制代码 
  .section {
      margin-bottom: 100px;
    }
  .section__image-wrap {
    display: inline-block;
    float: left;
    padding: 10px;
  }
  .section__image {
    width: 100%;
  }

效果图

吐槽

OMG，这这这...是什么情况啊～一行四个，怎么第二行就一个，前面三个位置都是空的，这不可能啊！等等，我需要静静～貌似图片不是同比例的宽高的，**这让我怎么搞，手动设置图片高度为50%？实时计算高度然后动态设置图片高度？

分割线来咯～你能够尝试着解决这个问题吗？

padding + position 思路

使用padding百分比的方式来实现不规整元素宽高等比例。padding-left/right设置百分比时，是参考父元素的宽度；想当然的padding-top/bottom设置百分比时，是参考父元素的高度，Oh no no no... 它也是参考父元素的宽度哦。

CSS

</>复制代码 
  .section {
    margin-bottom: 100px;
  }
  .section__image-wrap {
    display: inline-block;
    float: left;
    padding: 10px;
  }
  .section__image {
    width: 100%;
  }
  .section-revision--padding .section__image-wrap {
    position: relative;
    padding: 12.5% 0 0 25%;
  }
  .section-revision--padding .section__image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 10px;
  }

效果图

效果对比图

关键知识点

</>复制代码 
padding value description
auto 浏览器计算内边距。
length 规定以具体单位计的内边距值，比如像素、厘米等。默认值是0px。
% 规定基于父元素的宽度的百分比的内边距。
inherit 规定应该从父元素继承内边距。
</>复制代码 
w3school

padding value	description
auto	浏览器计算内边距。
length	规定以具体单位计的内边距值，比如像素、厘米等。默认值是0px。
%	规定基于父元素的宽度的百分比的内边距。
inherit	规定应该从父元素继承内边距。

资源 在线测试 源代码

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

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

css 不规整元素的宽高等比例

摘要：不规整元素的宽高等比例在不同屏幕情况中不同宽高的元素都以相同等比例等宽和等高方式展示。规定基于父元素的宽度的百分比的内边距。不规整元素的宽高等比例在不同屏幕情况中不同宽高的元素都以相同等比例、等宽和等高方式展示。需求设计师希望页面的图片区域，以宽高为2:1比例且所有图片的等宽和等高的方式展示。小加同学觉得设计师这需求太容易，分分钟搞定，拿到图片后便开始刷刷的撸代码。原型设计稿大...

ckllj 2019-08-02 15:54 评论0 收藏0
【复习】CSS实现宽高等比自适应容器

摘要：于是我们就需要实现一个宽度自适应，高度为宽度一半的容器。一思考如何实现这个问题类似于我们在移动端页面，上面有一张宽度的图片，如果我们没设置高度，则图片会根据原有尺寸，等比缩放。我们就可以利用这个特性，实现移动端的宽高等比自适应容器。在最近开发移动端页面，遇到这么一个情况：当页面宽度 100% 时，高度为宽度一半，并随手机宽度变化依然是一半。于是我们就需要实现一个宽度自适应，高度为宽...

habren 2019-08-30 15:44 评论0 收藏0
css 多列等高

摘要：多列等高高度不一的列以等高方式布局。需求设计师说某页面的新闻介绍，由于新闻内容不同导致显示区域的高度不一致，现需要使其高度视觉上保持一致。多列等高高度不一的列以等高方式布局。需求设计师说某页面的新闻介绍，由于新闻内容不同导致显示区域的高度不一致，现需要使其高度视觉上保持一致。小加同学觉得必须迅速解决，让设计师妹妹知道我们程序师哥哥的威武。原型设计稿大致如下:showImg(ht...

sarva 2019-08-02 15:54 评论0 收藏0
css 多列等高

摘要：多列等高高度不一的列以等高方式布局。需求设计师说某页面的新闻介绍，由于新闻内容不同导致显示区域的高度不一致，现需要使其高度视觉上保持一致。多列等高高度不一的列以等高方式布局。需求设计师说某页面的新闻介绍，由于新闻内容不同导致显示区域的高度不一致，现需要使其高度视觉上保持一致。小加同学觉得必须迅速解决，让设计师妹妹知道我们程序师哥哥的威武。原型设计稿大致如下:showImg(ht...

cncoder 2019-08-30 13:02 评论0 收藏0
一道CSS笔试题

摘要：分析这道题主要考察的居中和宽高等比例。如果元素的高度和宽度都以某一个值作为参照系，那么理论上元素的乘以可自定义。根据规范，的值为百分比时，是相对于父元素的宽度而言。 showImg(https://segmentfault.com/img/remote/1460000011668870?w=942&h=552);如上图所示，屏幕正中间有个元素A，随着屏幕宽度的增加，始终需要满足以下条件...

aikin 2019-08-30 13:47 评论0 收藏0