zoukankan      html  css  js  c++  java
  • 尺寸不固定的图片在div中垂直居中并完全显示

    前几天做一个项目,需要批量上传图片,图片外侧div尺寸固定;由于图片是用户输入的,所以大小存在不确定性,产品需求是无论图片尺寸多大,都要垂直居中完全显示

    废话不多说,直接上代码

    html

      <ul>
            <li>  
                <img src="pics/1.jpg" alt=""/>  
            </li>  
            <li>  
                <img src="pics/2.jpg" alt=""/>  
            </li>
        </ul>

    css

    *{padding:0px;margin:0px;list-style: none;}
    a img{border:0;}
    li{  
        position: relative;  
        left:100px;  
        top:100px;  
        width:300px; 
        height:200px;
        border: solid 1px red;  
        overflow: hidden;  
    }  
    img{  
        position: absolute;  
        margin: auto;  
        top: -9999px;  
        right: -9999px;  
        bottom: -9999px;  
        left: -9999px;  
        max-width:100%;
        max-height:100%
    }  

    结果
  • 相关阅读:
    感知机学习笔记
    NOIP 模拟19
    NOIP 模拟17
    NOIP模拟14-16
    「动态规划」-数位dp专题
    8.5 NOIP 模拟测试 13
    8.3 NOIP 模拟12题解
    8.3 NOIP CE反思
    「分治」-cdq分治
    8.1 NOIP模拟11
  • 原文地址:https://www.cnblogs.com/chengkun101/p/6214536.html
Copyright © 2011-2022 走看看