zoukankan      html  css  js  c++  java
  • HTML如何让IMG自动适应DIV容器大小

    版权声明:本文为博主原创文章,未经博主允许不得转载。作者:沙师弟专栏 https://blog.csdn.net/u014597198/article/details/80403946
    HTML如何让IMG自动适应DIV容器大小
    为了让IMG自适应大小,如下我做了一个横向自适应的示例:

    IMG样式(横向拉伸,纵向自动匹配大小)
    DIV样式(元素居中显示)
    IMG样式(横向拉伸,纵向自动匹配大小)
    100%;
    height:auto;
    1
    2
    DIV样式(元素居中显示)
    display:flex;
    align-items:center;
    justify-content:center;
    1
    2
    3
    示例代码如下:
    如下是两个大小和比例都不同的图片,应用这个方法可以让图片自动填充并居中显示

    <html>
    <head>
    <title>让图片自动适应DIV容器大小</title>
    <style>
    .ShaShiDi{
    500px;
    height:400px;
    display:flex;
    align-items:center;
    justify-content:center;
    /*为了效果明显,可以将如下边框打开,看一下效果*/
    /* border:1px solid black; */
    }

    .ShaShiDi img{
    100%;
    height:auto;
    }

    </style>
    </head>
    <body>
    <div class="ShaShiDi">
    <img src="./1.png"/>
    </div>
    <div class="ShaShiDi">
    <img src="./2.png"/>
    </div>
    </body>
    </html>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30

    ---------------------
    作者:沙振宇
    来源:CSDN
    原文:https://blog.csdn.net/u014597198/article/details/80403946?utm_source=copy
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    11.查询截取分析_慢查询日志
    10.查询截取分析_查询优化
    8.索引优化
    7.使用EXPLAIN 来分析SQL和表结构_2
    7.使用EXPLAIN 来分析SQL和表结构_1
    6.B+Tree 检索原理
    5.索引简介
    创建集合搜索帮助
    介绍SAP预留函数创建搜索帮助
    通过出口函数创建搜索帮助
  • 原文地址:https://www.cnblogs.com/findumars/p/9795237.html
Copyright © 2011-2022 走看看