zoukankan      html  css  js  c++  java
  • 如何实现大图居中超过的部分两边自动隐藏

      现在大多数用的显示器都是大屏的,所以我们美工在设计海报时都会用大图,但还是有一部分朋友是用小屏幕,那么,如何实现大图居中超过的部分两边自动隐藏呢?ytkah也遇到这样的情况,一起来看看怎么解决吧

    <div style="height: 355px; overflow: hidden; position: relative;  100%;">
      <img alt="华厦眼科医院集团" src="http://www.tongruieye.com/xeyk/images/jtfbt.jpg" style="display: block; height: 355px; left: 50%; margin-left: -960px; position: absolute;  1920px;">
    </div>

      需要为div设置一个高度,本例是335px,自动隐藏的属性overflow:hidden;注意position: relative。然后要为图片设置left:50%;margin-left:-960px(图片长度的一半);position:absolute;

      这样改造之后基本上通用的屏幕都能正常显示图片的中间部分,不会出现左右推移的情况发生

  • 相关阅读:
    java面向对象day01
    找工作——JVM内存管理
    找工作——多线程
    找工作-——网络IO
    找工作--volatile
    找工作——异常处理
    找工作--设计模式
    Sqoop安装
    NIO
    Hadoop源码编译
  • 原文地址:https://www.cnblogs.com/ytkah/p/5692609.html
Copyright © 2011-2022 走看看