zoukankan      html  css  js  c++  java
  • 图片宽度和高度都大于div,实现图片在div中居中

    1,用img标签显示图片时
    <style type="text/css">
    #out{height:100px; 150px; position:relative; overflow:hidden;}
    #mid{position:absolute;top:50%; left:50%; 1000px; margin-left:-500px; text-align:center;}
    #in{ position:relative; top:-50%;}
    </style>
     
    <div id="out">
      <div id="mid">
        <div id="in">
        <img src="http://i2.sinaimg.cn/blog/1/2008/0306/U2725P503T1D169F6DT20080822100708.jpg" />
        </div>
      </div>
    </div>
     
    2,可以把图片当做背景
    <style type="text/css">
    #odiv {
      150px;
      height:100px;
    }
    #odiv .img{
      display:block;
      208px;
      height:143px;
      background:url('http://i2.sinaimg.cn/blog/1/2008/0306/U2725P503T1D169F6DT20080822100708.jpg') no-repeat center top;
    }
    </style>
    <div id="odiv">
      <a class="img" href="#"></a>
    </div>
  • 相关阅读:
    shell脚本基础
    rtsp冷门解释
    C++基础之动态内存
    树莓派3安装ros
    Trie树
    [LeetCode]The Skyline Problem
    [LeetCode]Implement Trie (Prefix Tree)
    C++基础之适配器
    配置树莓派3的openwrt中的网络
    [LeetCode]Self Crossing
  • 原文地址:https://www.cnblogs.com/ShowJoy/p/3873326.html
Copyright © 2011-2022 走看看