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>

    效果前后如图

         

  • 相关阅读:
    【项目】项目1
    Python脚本1
    Python基础24
    Python基础23(习惯)
    01-Spring(1)
    12-Shell(2)
    11-Shell(1)
    10-搭建EE环境
    09-常用指令(3)
    08-常用指令(2)
  • 原文地址:https://www.cnblogs.com/jingzi111/p/5050303.html
Copyright © 2011-2022 走看看