zoukankan      html  css  js  c++  java
  • 利用 :before 特性实现图片按比例显示

    好吧,想不到自称布局小沙弥的我会被图片按比例显示给尴尬到。

    设计师跟我说,这里的图要按 750x330 的,好吧,但这图是屏宽呀,屏幕宽度会变化的,那高度也会不定咯,

    要么裁图片(工作量大),要么给定高(图片会比例不对,或者用 background 显示不全),来体会一下...

     当宽度变化时,立马就呵呵了,一脸懵逼...

    后来吧,在研究大量图片数据加载优化问题时,去调研了下淘宝天猫京东,然后一不小心发现了 :before 这种布局方式,先看一眼代码

    .img {
      position: relative;
    }
    .img:before {
      content: "";
       100%;
      padding-top: 66.6666666%;
      display: block;
    }
    .img > img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    

    它利用了 :before 的特性,即,相对于该元素百分比。

    不管 .img 的宽度为多少,:before 的高度使用是它的 2/3,也就是宽高比始终 3:2,至于子级内容,你懂的...

    有个不大不小的问题,就是它和 flex-direction: column; 有冲突。

    于是乎,这篇博客愉快地结束了。

  • 相关阅读:
    怎么写好组件
    你所不知道的 URL
    响应式Web设计 – 布局
    ajax请求总是不成功?浏览器的同源策略和跨域问题详解
    滑屏 H5 开发实践九问
    UVALive
    [CQOI2018] 破解D-H协议
    [CQOI2018] 解锁屏幕
    HDU
    CodeChef
  • 原文地址:https://www.cnblogs.com/foreverZ/p/constrain-img-proportion-width-before.html
Copyright © 2011-2022 走看看