zoukankan      html  css  js  c++  java
  • 不改变图片大小,使图片居中的办法

    一、运用背景图像

    <style>
    #tt {
        height: 400px;
        border: 1px solid #e6e6e6;
        background-image: url(../images/anquan/2.png);
        background-position: center top;
        margin-top: 15px;
    }
    </style>
    <div id="tt"> </div>

    二、运用calc():自动计算屏幕大小

    <style>
    #tt {
      background-color:#FF0000;
      width: 100%;
      height:500px;
      overflow: hidden;
    }
    #tt .img
    {
      width:1920px;
      margin:0 calc(50% - 960px);
    }
    </style>
     
    <div id="tt"><img src="http://b.zol-img.com.cn/desk/bizhi/image/5/1920x1080/1418984437613.jpg" class="img"/></div>

    效果前后如图

         

  • 相关阅读:
    meta标签
    Vue(day8)
    Vue(day7)
    Vue(day6)
    Flex布局
    Vue(day5)
    jquery.data()&jquery.extend()
    Promise对象
    Vue(day4)
    Vue(day3)
  • 原文地址:https://www.cnblogs.com/jingzi111/p/5050303.html
Copyright © 2011-2022 走看看