搜索
查看: 13023|回复: 0

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

[复制链接]
发表于 2020-4-27 11:51:31 | 显示全部楼层 |阅读模式
  今天做一个网站的banner轮播,程序里面自带的是自动改变图片的高宽比例达到自适用的目的。  目标想法是控制div宽度100%,图片大小不变,div宽度改变的情况下,图片始终居中显示,然后隐藏掉两边的图片。: t: y2 E  `, f, T- i' E
/ b3 G, u- q& @9 i: d4 ~2 e6 ?
  实现原理:) f4 L- S( F5 S1 q1 {5 K
  固定div的高度为500px,宽度是100%,超出部分隐藏,以达到自适用浏览器宽度的要求。图片控制宽1920px,适用目前大部分电脑屏幕分辨率,然后就是设置margin了,想要他始终居中,就是中心的位置始终不变。在1920px的情况下,图片的中心x轴就是960px。那么在1800px就是900px,相比与标准的1920px宽度,向左移动了60px,只需要margin左边移动-60px即可。
, s' I4 V2 o7 I/ w; O  同理在100%的x轴坐标下,margin-left的值就是50%-960px,代码如下:; n7 t# D) Y' {( R
  1. <style>" |- ?( J7 c3 D8 b7 [
  2. #bn {0 h& `9 @0 B" [6 }! b/ h7 C: W6 q. t
  3.   background-color:#FF0000;" r% ^  r' G% s8 O# e& Q
  4.   width: 100%;
    . c) c/ F: z  u1 g8 R. i+ }3 O8 N; N
  5.   height:500px;  ^. }$ ?8 O+ j- g! t$ z+ s
  6.   overflow: hidden;% J- D0 V% W$ y
  7. }
    0 L: }* d1 v9 Q4 h, D
  8. #bn .img9 N* g9 g7 C: W7 z
  9. {
    ! q; _) T. `8 a' ~7 z9 L; c' ^
  10.   width:1920px;- S3 a  i* D8 b0 J9 E* h" |
  11.   margin:0 calc(50% - 960px);2 S# L5 Y$ s6 H, n  e/ Z3 y- _
  12. }5 e' w- u5 H& i( H; ^, }0 C" i$ n. c2 F
  13. </style>& e3 O  {) K, n& ~* Y

  14. 6 T0 L5 y* G( V
  15. <div id="bn"><img src="/image/1.jpg" class="img"/></div>
复制代码
( C( G: s  K! n. |0 S& c) n9 e

: Y* d  A8 A: ~& c( e2 `1 B' f
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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