搜索
查看: 9405|回复: 0

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

[复制链接]
发表于 2020-4-27 11:51:31 | 显示全部楼层 |阅读模式
  今天做一个网站的banner轮播,程序里面自带的是自动改变图片的高宽比例达到自适用的目的。  目标想法是控制div宽度100%,图片大小不变,div宽度改变的情况下,图片始终居中显示,然后隐藏掉两边的图片。
- d' o. M; R6 T# X, q4 Y0 ]
1 O1 h# d; g) t7 A" y* L5 W  实现原理:
6 ^: h5 g9 ~8 x5 s9 R  固定div的高度为500px,宽度是100%,超出部分隐藏,以达到自适用浏览器宽度的要求。图片控制宽1920px,适用目前大部分电脑屏幕分辨率,然后就是设置margin了,想要他始终居中,就是中心的位置始终不变。在1920px的情况下,图片的中心x轴就是960px。那么在1800px就是900px,相比与标准的1920px宽度,向左移动了60px,只需要margin左边移动-60px即可。8 E% M+ s6 |; e: m. A$ }" q
  同理在100%的x轴坐标下,margin-left的值就是50%-960px,代码如下:
5 x( p9 l5 Y3 w
  1. <style>
    : ^$ p( U; ^  A
  2. #bn {, E! g& ~8 a1 |3 m0 {' s2 Y5 X
  3.   background-color:#FF0000;
    ( G& V* |5 m6 ?) L  m
  4.   width: 100%;
    & T" L! `3 ^" F3 W' M
  5.   height:500px;
    ' k3 e. a% q: ~- K
  6.   overflow: hidden;
      C% v6 ?* s/ ^, ~$ t
  7. }" T6 w7 Z6 M" k
  8. #bn .img5 {4 i; O* ~. q* \$ L' x
  9. {, s8 ]6 N' A9 t; d( X& d5 o
  10.   width:1920px;
    ! e" i$ ?, h/ [7 ^  V: O. a" h/ b
  11.   margin:0 calc(50% - 960px);
    7 l, U: ?! L+ a
  12. }
    ) g# r7 s3 ~9 @! Y7 O+ _2 n3 g5 x
  13. </style>
    : A' T% i8 m0 ]5 J3 w, i

  14. : v( S' j9 L0 L* N) J! ?; s
  15. <div id="bn"><img src="/image/1.jpg" class="img"/></div>
复制代码

2 s9 u6 R2 v9 U
4 D: f8 X3 P: Z5 @( \$ A9 s
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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