专栏首页佛曰不可说丶移动端css解决图片高度无法百分比问题妙用

移动端css解决图片高度无法百分比问题妙用

移动端布局,div按比例布局,宽度为百分比,高度和宽度一样,即让div为正方形

html

<div>一个正方形</div>

css

div{
    width:100%;
    height:0;
    padding-top:100%;
}

如此便可实现一个正方形,完美解决移动端!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 重学前端(二)-你真的了解你JS的对象吗?

    ECMAScript标准+ webAPI 那么我们今天要一起学习的就是ECMASciript中的-Object,他实际上是一个es的语言标准

    用户7413032
  • response headers添加Cache-Control 和request headers添加Cache-Control 到底有啥区别

    缓存是一个复合的概念,本文是http缓存系列文章之一,仅讨论Cache-Control这个字段的两个值:no-cache和max-age=0的区别。关于Cach...

    用户7413032
  • 搞定混合开发面试,这一篇就够了!

    上面的定义是百度百科的官话,用白话文翻译就:所谓hybridApp就是在app中嵌入web页面

    用户7413032
  • [前端][css]float left布局换行不正常问题

    最近遇到一个页面布局上的问题,后来模拟了一下还原了下出现的原因。本来大概想实现的布局大概是这样的

    Tuzei
  • vue弹出层 +内容手风琴 简单实现

    yangdongnan
  • APICloud开发者进阶之路|【案例源码】简单时间轴

    因为想做透明头部,但是win页面打开frm页面后,会遮住win页面的头部,所以就取消了win页面的header标签,下面是win页面的代码:

    APICloud
  • jQuery第二十一篇 scrollTop

    用户7873631
  • jQuery第十三篇 内容选择器(:empty :parent :contains(text) :has(selector)

    用户7873631
  • CSS旋转魔方

     想不想做一个3D魔方,把儿子的照片放进去,外面是你,里面是他。本人从业至今,自诩是动画机器人,苦心钻研各种动画,精通CSS3、Canvas等,不管你要做什么,...

    我不是费圆
  • Python爬虫获取豆瓣电影并写入excel

    这篇文章主要介绍了Python爬虫获取豆瓣电影并写入excel ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考...

    python学习教程

扫码关注云+社区

领取腾讯云代金券