zoukankan      html  css  js  c++  java
  • max-width实现图片的自适应

    在自适应布局中,有时候会让图片随着宽度的变化相应的放大或者缩小,或者说让图片等比缩放,但是每个图片的大小又不一样,这个时候我们就要用到max-width这个属性了。

    img{

      max-100%;

    }

    这个属性直接设置在img标签上,这时图片就能缩放了。

    但是如果在百分比容器中使用这个属性,并且要实现所有尺寸不同的图片显示相同的大小,并且实现等比缩放,这是单纯的在img上设置max-100%这个属性已经不奏效了,看效果:

    左右两边宽度都是50%,图片也可以缩放,但是高度不能等高。这时就要统一设置图片的高宽了,宽度用百分比或者px都可以,高度就要设置为定高了,这是无论图片大小是否一致,都能实现等高缩放了,效果:

    css样式:

  • 相关阅读:
    JavaScript String常用方法和属性
    JavaScript null 和 undefined
    document.write()
    MyBatis中的@MapKey注解
    Zookeeper实现分布式锁
    zookeeper相关
    二阶段提交和三阶段提交
    代理模式
    模板方法模式
    策略模式
  • 原文地址:https://www.cnblogs.com/huangxi/p/4428414.html
Copyright © 2011-2022 走看看