搜索
查看: 13027|回复: 0

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

[复制链接]
发表于 2020-4-27 11:51:31 | 显示全部楼层 |阅读模式
  今天做一个网站的banner轮播,程序里面自带的是自动改变图片的高宽比例达到自适用的目的。  目标想法是控制div宽度100%,图片大小不变,div宽度改变的情况下,图片始终居中显示,然后隐藏掉两边的图片。& j- _* X, @. ?
' ^/ K+ g2 _6 |& m
  实现原理:
# V0 A5 H3 ]5 s5 L0 M  固定div的高度为500px,宽度是100%,超出部分隐藏,以达到自适用浏览器宽度的要求。图片控制宽1920px,适用目前大部分电脑屏幕分辨率,然后就是设置margin了,想要他始终居中,就是中心的位置始终不变。在1920px的情况下,图片的中心x轴就是960px。那么在1800px就是900px,相比与标准的1920px宽度,向左移动了60px,只需要margin左边移动-60px即可。$ L% w/ E4 d& p
  同理在100%的x轴坐标下,margin-left的值就是50%-960px,代码如下:
7 ]( v8 W$ L; \# t& ^* m
  1. <style>
    1 t1 i8 s4 M/ R4 ]! z# E
  2. #bn {7 Y. y8 l# o& t  @1 C8 ^
  3.   background-color:#FF0000;
    ; G9 ~& G1 v" X0 A
  4.   width: 100%;
    : A, m" R0 ?6 T2 u
  5.   height:500px;5 z+ K+ Y0 V- p) O" A1 Z& b: S
  6.   overflow: hidden;
    ! D" ~. l' d) g7 g
  7. }2 f8 K7 X3 K$ M4 H  R  ?8 Z$ a# O
  8. #bn .img
    / p2 L9 M( V# c; i- B
  9. {  j9 Q  J) i7 [$ ]- e9 @
  10.   width:1920px;
    & V# |7 s: Y) a8 O) v
  11.   margin:0 calc(50% - 960px);
    3 ?- `! N& d$ `  @' ]3 y6 P
  12. }" e4 `; A( d2 k( g2 P
  13. </style>
    - M1 a) J1 `& {6 C7 p9 a% S9 B6 Z
  14. # N+ a& w% J) y+ e# N
  15. <div id="bn"><img src="/image/1.jpg" class="img"/></div>
复制代码
- O  K9 I( n4 Z1 b+ w" ]! T$ [
" _. ]. ^! s6 ?( u; q& G
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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