搜索
查看: 13175|回复: 0

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

[复制链接]
发表于 2020-4-27 11:51:31 | 显示全部楼层 |阅读模式
  今天做一个网站的banner轮播,程序里面自带的是自动改变图片的高宽比例达到自适用的目的。  目标想法是控制div宽度100%,图片大小不变,div宽度改变的情况下,图片始终居中显示,然后隐藏掉两边的图片。
+ d: F$ x9 ?! d/ j% N8 R( o8 K" B, T) c  z! @4 ?
  实现原理:7 N8 z6 b7 F; ]: Y( F" g0 q! Y
  固定div的高度为500px,宽度是100%,超出部分隐藏,以达到自适用浏览器宽度的要求。图片控制宽1920px,适用目前大部分电脑屏幕分辨率,然后就是设置margin了,想要他始终居中,就是中心的位置始终不变。在1920px的情况下,图片的中心x轴就是960px。那么在1800px就是900px,相比与标准的1920px宽度,向左移动了60px,只需要margin左边移动-60px即可。
  n. a; A; y" R% c. ?: y  同理在100%的x轴坐标下,margin-left的值就是50%-960px,代码如下:* ^! e' h- P) {$ W" T2 b+ @
  1. <style>/ s7 R% k( D2 z/ V/ f  W2 l
  2. #bn {8 W2 _* O7 n5 p
  3.   background-color:#FF0000;
    8 M. E* I* p  q7 x
  4.   width: 100%;! C( {7 d/ D1 f. K8 h7 _
  5.   height:500px;
    6 E  |: k( ]2 n8 r
  6.   overflow: hidden;3 s$ h9 d  Q: C$ `4 `
  7. }8 ?7 O) H8 g& Y, j4 [% @' W
  8. #bn .img# G% i0 V8 I, p  K" C3 Z! V
  9. {# K1 h* W9 b+ ~) E$ V9 R
  10.   width:1920px;
    3 i6 U7 t) B/ w' n* ?( V' X
  11.   margin:0 calc(50% - 960px);
    7 s) I+ p( l/ p% H
  12. }
    - @) J& L1 |9 H6 t- e
  13. </style>
    / w) z% c- E4 C, V+ Y- M
  14. 7 E. \/ E$ {& Q6 _0 N. U" Z- x; r0 ^
  15. <div id="bn"><img src="/image/1.jpg" class="img"/></div>
复制代码
0 ?* k# r; F: h) @( w$ y

" r9 a+ ]1 P5 m
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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