zoukankan      html  css  js  c++  java
  • HTML+CSS图片大小自适应~PC电脑端、手机端

    写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况:

    <style>

    div{400px;height:400px;border:1px solid #000; }

    img{100%;height:100%;}

    </style>

    不管容器有多大,只要将img的宽高设置成100%(这里的100%是相对于父级宽高而言)就能自适应容器大小。

    那是不是就这这么简单完事儿了呢?如果你不介意图片被放大后可能出现失真的话也的确是这样就ok了。 
    假如你介意 图片放大后会失真,我们可以改进上面的代码,只需要将img的样式简单修改.

    img{max-100%;max-height:100%;}

    max-100%和100%的区别在于,max-width是相对于img自身的尺寸而言的。意思是图片最大宽度为自身尺寸的宽,在这里就是100px。而width的100%我们上面已经说过了是相对于父级宽度的,所以为了不让图片被放大后失真我们可以设置img的最大宽度为自身尺寸大小,更通俗的讲就是只允许缩小不允许放大img。

    具体情况中是选择100%还是max-100%还是依据个人的需求而定,另外在响应式设计中这个问题稍微会复杂一点。

    图片适应手机端  要控制的是装图片的容器宽度

     img{
    display: block;(可不加 banner可以用)
    height: auto;
    max- 100%;(或者width:100%)
    }
    将以上标签加入之后保存,再用手机打开即是自适应网页了。

  • 相关阅读:
    border-radius属性失效了Ծ‸Ծ
    Python默认版本切换
    Mac系统下安装PyCharm
    Python查看与安装
    MySql查询最近一个月,一周,一天
    Mysql计算并保留两位小数
    Mysql 用户ip访问根据省份查询
    Echarts 中国地图(包括china.js文件)
    JQuery进度条
    Java 求两个数百分比%
  • 原文地址:https://www.cnblogs.com/kenshinobiy/p/13258132.html
Copyright © 2011-2022 走看看