zoukankan      html  css  js  c++  java
  • 关于图片自适应不同分辩率屏幕

    一张图片在不同宽度的显示屏中 的显示问题                                                                                                                                            

    常用做法是给图片宽度 100%;max-  无法预知用户将使用多大宽度的图片 max无法控制 所以我们从父元素考虑

    在css中 元素设置宽度为百分比 那么它的宽度是随父元素的宽度变化的  所以我们给每个图片一个父元素 让父元素的宽度随内容变化

    (浮动--但容易影响页面布局 display:inline-block ----块级元素宽度随页面而变化) 效果如下:

    (大屏时)

    (小屏时)

    代码如下:

    html                                                                                               

    <div class="img-wrap">

        <img src="imgs/560x200.jpg" alt="">

    </div>

    <div class="img-wrap">

        <img src="imgs/440x200.jpg" alt="">

    </div>

    <div class="img-wrap">

        <img src="imgs/300x200.jpg" alt="">

    </div>

    css                                                                                                  

    .img-wrap {

      displayinline-block;

    }

    .img-wrap img {

        width100%;

        vertical-alignmiddle;

    }

  • 相关阅读:
    OCP-1Z0-053-V12.02-655题
    OCP-1Z0-053-V12.02-656题
    OCP-1Z0-053-V12.02-639题
    EXCEL文件打开缓慢的问题解决
    IOCP底层,支持超过15000个连接
    OCP-1Z0-053-V12.02-340题
    OCP-1Z0-053-V12.02-338题
    OCP-1Z0-053-V12.02-336题
    OCP-1Z0-053-V12.02-334题
    OCP-1Z0-053-V12.02-333题
  • 原文地址:https://www.cnblogs.com/ylboke/p/6703032.html
Copyright © 2011-2022 走看看