zoukankan      html  css  js  c++  java
  • 图片大于父元素时的居中

    原图:

    1.当图片的宽固定,高度自适应,父元素的高度小于图片高度时,使图片在父元素中垂直居中:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title></title>
        <style>
            .ver {
                position: relative;
                height: 100px;
                overflow: hidden;
            }
            .ver img {
                position: absolute;
                width: 300px;
                top: 50%;
                transform: translateY(-50%);
            }
        </style>
    </head>
    <body>
    <div class="ver">
        <img src="http://imgmall.tg.com.cn/group1/M00/C7/03/Cgooa1ZKzQDpoh-8AAuqVJg4QGo149.png"></img>
    </div>
    </body>
    </html>

    2.当图片的高固定,宽度自适应,父元素的宽度小于图片宽度时,使图片在父元素中水平居中:

            .hor {
                position:relative;
            }
            .hor img {
                position: absolute;
                height: 300px;
                left: 50%;
                transform: translateX(-50%);
            }
    <div class="hor">
        <img src="http://imgmall.tg.com.cn/group1/M00/C7/03/Cgooa1ZKzQDpoh-8AAuqVJg4QGo149.png"></img>
    </div>

  • 相关阅读:
    CTSC2018滚粗记
    HNOI2018游记
    NOIWC 2018游记
    PKUWC2018滚粗记
    HNOI2017 游记
    NOIP2017题解
    [HNOI2017]抛硬币
    [HNOI2017]大佬
    NOIP难题汇总
    [NOI2013]树的计数
  • 原文地址:https://www.cnblogs.com/mywaystrech/p/5083674.html
Copyright © 2011-2022 走看看