zoukankan      html  css  js  c++  java
  • 关于在移动网页中图片自适应大小的写法

    一般在移动网页时,图片属性写成如下就可以达到自适应大小

    <style type="text/css">
    .nameg{background: rgba(000,000,000,0.6);}    
    .nameg div{float: left;}
    .nameg .a1{width: 10%;background:#000000;}
    .nameg .a1 img{width: 100%;height: 100%;display: block;}
    .nameg .a2{width: 90%}
    </style>
    <div class="nameg clearfix">
        <div class="a1">
            <img src="iconfont-close..png">
        </div>
        <div class="a2"></div>
    </div>

    若在某些特殊时候图片会出现宽度自动高度却拉伸的情况下,可以用以下写法(max- 100%; height:auto;display: block;

    注:做用户图像图片时最好使用1比1标准尺寸图片,且要有默认图片,否则在占位符时或找不到图片时依然会出现拉伸现象

    <style type="text/css">
    .nameg{background: rgba(000,000,000,0.6);}    
    .nameg div{float: left;}
    .nameg .a1{width: 10%;background:#000000;}
    .nameg .a1 img{max-width: 100%; height:auto;display: block;}
    .nameg .a2{width: 90%}
    </style>
    <div class="nameg clearfix">
        <div class="a1">
            <img src="iconfont-close..png">
        </div>
        <div class="a2"></div>
    </div>
  • 相关阅读:
    数据结构_队列和滑动窗口
    数据结构_栈和单调栈
    数据结构_链表及邻接表
    JavaSE多线程
    AppExtension总结
    FlutterBloc 2.1.1迁移至6.0.6
    iOS通知总结
    Provider 4.3.2+2 f
    Fish-Redux 研究
    王道考研复习-操作系统-内存管理(三)
  • 原文地址:https://www.cnblogs.com/zhixi/p/4917961.html
Copyright © 2011-2022 走看看