搜索
查看: 6982|回复: 0

[网站] 图片宽度超出div,css控制图片不改变原大小情况居中显示,图片超出div部分隐藏

[复制链接]
发表于 2020-4-27 11:51:31 | 显示全部楼层 |阅读模式
  今天做一个网站的banner轮播,程序里面自带的是自动改变图片的高宽比例达到自适用的目的。  目标想法是控制div宽度100%,图片大小不变,div宽度改变的情况下,图片始终居中显示,然后隐藏掉两边的图片。$ z! M- o& v4 p" u: [; [* U/ ~
2 Z6 t0 o6 p  u
  实现原理:
; q" g8 H! Q9 _" T$ J7 h  固定div的高度为500px,宽度是100%,超出部分隐藏,以达到自适用浏览器宽度的要求。图片控制宽1920px,适用目前大部分电脑屏幕分辨率,然后就是设置margin了,想要他始终居中,就是中心的位置始终不变。在1920px的情况下,图片的中心x轴就是960px。那么在1800px就是900px,相比与标准的1920px宽度,向左移动了60px,只需要margin左边移动-60px即可。. ]# E( O: v5 i4 L0 ?- k& x: ?7 I
  同理在100%的x轴坐标下,margin-left的值就是50%-960px,代码如下:* v. w* \  }+ d. A4 g  }" o
  1. <style>3 ~  F; v- B2 }' K2 K9 |
  2. #bn {
      Y! k+ A- z( K
  3.   background-color:#FF0000;
    2 i8 ~" B8 M  ~- s
  4.   width: 100%;) Y, m* l/ A) A4 g
  5.   height:500px;
    # w9 k$ D7 a- K& a3 y2 ?) {% L
  6.   overflow: hidden;
    0 c/ K4 e4 o+ r1 S
  7. }
    1 s3 R. V( u7 q2 S& t) ]
  8. #bn .img
    # ?0 x2 Z0 {' A; `# ]! a
  9. {9 r! X, f8 R) E
  10.   width:1920px;: x' S# e+ S$ ], T
  11.   margin:0 calc(50% - 960px);
    " r6 t6 u! M# K% f, v" P
  12. }& ], {2 D- A1 @& t: R  `8 A
  13. </style>
    6 W1 h7 C  Q; P/ t1 B
  14. 2 ?3 @' A3 u5 u
  15. <div id="bn"><img src="/image/1.jpg" class="img"/></div>
复制代码
% V5 j! i7 H* s9 o! p% P
% g2 I5 k* n  E9 h* }5 z
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 马上注册

本版积分规则

热议作品
精华帖子排行
精彩推荐

虾皮社区,成立十年了!

站长自己也搞不懂想做个什么,反正就是一直在努力的做!

Copyright © 2007-2019 xp6.org Powered by Discuz

QQ|小黑屋|手机版|Archiver|虾皮社区 ( 鲁ICP备13006813号-1 ) 鲁公网安备 37021102000261号 |网站地图
返回顶部 返回列表