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

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

    img{

      max-100%;

    }

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

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

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

    css样式:

  • 相关阅读:
    ASP.NET Session
    表格导入和导出
    C#根据当前时间获取其他时间
    SuperGridControl全局设置
    无框窗体移动
    窗体在屏幕边缘隐藏
    comboBoxEx
    CROSS JOIN
    supergirdcontrol单元格添加控件
    ADVtree
  • 原文地址:https://www.cnblogs.com/huangxi/p/4428414.html
Copyright © 2011-2022 走看看