zoukankan      html  css  js  c++  java
  • 让image像背景图片一样,居中对齐,网页自适应

    <div class="page4_content">
     <div class="page4_box">
      <div class="page_bg_16">
        <img src="fuka.jpg">
      </div>
     </div>
    </div>

    .page4_content{100%; height:200px;}
    .page4_content .page4_box {
    100%;
    height: 100%;
    left: 50%;
    margin-left: -100%;
    }
    .page4_content .page4_box .page_bg_16{
    display: block;
    200%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    text-align: center;
    }
    .page4_content .page_bg_16 img, .page4_content .page_bg_4 img {
    height: 100%;
    display: inline-block;
    auto;
    margin: 0 auto;
    text-align: center;
    }

    所遇到的问题:让图片像背景图片一样居中对齐。

    思路:在img的外框的div上写200%;让image居中。然后针对image 的外框进行居中对其。

    让图片根据高度自适应,宽度始终是居中的状态。宽度多余的部分隐藏

  • 相关阅读:
    JavaEE高级-JPA学习笔记
    jQueryrocket
    jQueryrocket
    jQueryrocket
    jQueryrocket
    jQueryrocket
    jQueryrocket
    jQueryrocket
    jQueryrocket
    jQueryrocket
  • 原文地址:https://www.cnblogs.com/shirleyjiang/p/11794144.html
Copyright © 2011-2022 走看看