搜索
查看: 296|回复: 0

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

[复制链接]
发表于 2020-4-27 11:51:31 | 显示全部楼层 |阅读模式
  今天做一个网站的banner轮播,程序里面自带的是自动改变图片的高宽比例达到自适用的目的。  目标想法是控制div宽度100%,图片大小不变,div宽度改变的情况下,图片始终居中显示,然后隐藏掉两边的图片。
  N. L/ |2 y6 o3 Y3 ~% ~7 B; k3 R; b; ^) w
  实现原理:
2 _4 _8 m( U2 u9 H$ q7 n  固定div的高度为500px,宽度是100%,超出部分隐藏,以达到自适用浏览器宽度的要求。图片控制宽1920px,适用目前大部分电脑屏幕分辨率,然后就是设置margin了,想要他始终居中,就是中心的位置始终不变。在1920px的情况下,图片的中心x轴就是960px。那么在1800px就是900px,相比与标准的1920px宽度,向左移动了60px,只需要margin左边移动-60px即可。1 }) Y" y7 c. d8 B
  同理在100%的x轴坐标下,margin-left的值就是50%-960px,代码如下:
  e5 {$ t: y% o' h+ D
  1. <style>
    1 {2 k! ^( F# Z& B! f! }- C; {
  2. #bn {. D% ^  K$ d4 d: g+ I4 y
  3.   background-color:#FF0000;
    3 P- \+ D; c* x# n/ ^6 n# U. ?
  4.   width: 100%;; R* n  N7 Z; Y3 g) G
  5.   height:500px;) O, v) D& }) t( Y6 m, I; ?( u
  6.   overflow: hidden;
    : b% d+ R0 _& U5 O
  7. }  X0 k1 T- A: f9 F; k# J
  8. #bn .img. ]: p2 s) P  A& {
  9. {6 @0 n; D! x* s3 V) `' j1 M5 u# G
  10.   width:1920px;
    6 i9 Z0 M. j' ^5 n* R' @6 @
  11.   margin:0 calc(50% - 960px);
    & H! x; R  a2 X% b# s2 n
  12. }
    / ]) _6 P0 a; p* z4 k" D5 x" Z  G
  13. </style>- p/ G9 J0 l# }5 N/ Q/ x  w) |- H

  14. $ A, R+ y8 {/ B" _- |6 q
  15. <div id="bn"><img src="/image/1.jpg" class="img"/></div>
复制代码
: I  F4 S. N: J$ |
) h' _/ B/ n' h1 y# l
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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