搜索
查看: 7913|回复: 0

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

[复制链接]
发表于 2020-4-27 11:51:31 | 显示全部楼层 |阅读模式
  今天做一个网站的banner轮播,程序里面自带的是自动改变图片的高宽比例达到自适用的目的。  目标想法是控制div宽度100%,图片大小不变,div宽度改变的情况下,图片始终居中显示,然后隐藏掉两边的图片。: }' @& x% B# J: |1 U) B9 G

; u; h4 ?% h- D, I  C9 c) [  实现原理:
* `- W4 a# V% @" J& o( H  固定div的高度为500px,宽度是100%,超出部分隐藏,以达到自适用浏览器宽度的要求。图片控制宽1920px,适用目前大部分电脑屏幕分辨率,然后就是设置margin了,想要他始终居中,就是中心的位置始终不变。在1920px的情况下,图片的中心x轴就是960px。那么在1800px就是900px,相比与标准的1920px宽度,向左移动了60px,只需要margin左边移动-60px即可。/ o- t, \# n: U$ u: g7 {. }5 }/ ^
  同理在100%的x轴坐标下,margin-left的值就是50%-960px,代码如下:4 E% r% ~2 t! M% M
  1. <style>
    4 ^0 S( S4 @7 {! m/ \
  2. #bn {
    , j( l2 }* {% u5 h7 P2 M. P: [
  3.   background-color:#FF0000;* Y( q. t* W. `1 d, b
  4.   width: 100%;1 q3 f  ?% O" i
  5.   height:500px;
    1 G8 G( g3 ~" h" n& V, E4 Q
  6.   overflow: hidden;8 K4 J* G3 B# W/ `3 m  v& z8 D
  7. }
    + E/ j. d7 D* f) N4 R
  8. #bn .img
    / F* e" T9 d# s' d. z! c; M
  9. {& |5 E8 T; z# Q
  10.   width:1920px;
    6 Q- t" A4 n* J/ n+ b- i: c
  11.   margin:0 calc(50% - 960px);
    0 z* F0 `4 w7 P6 e/ O
  12. }
    ) x1 X& O5 @/ f
  13. </style>
    ) @5 j( Y' K7 n
  14. 3 v( {+ X# D1 H* h& G3 P
  15. <div id="bn"><img src="/image/1.jpg" class="img"/></div>
复制代码
. m: i+ Z7 L- y5 I$ X: X* D
6 u- W; N/ h% s' _( C
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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