搜索
查看: 1746|回复: 0

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

[复制链接]
发表于 2020-4-27 11:51:31 | 显示全部楼层 |阅读模式
  今天做一个网站的banner轮播,程序里面自带的是自动改变图片的高宽比例达到自适用的目的。  目标想法是控制div宽度100%,图片大小不变,div宽度改变的情况下,图片始终居中显示,然后隐藏掉两边的图片。
9 G" ~# K0 c% V, R  T; J
1 A, t5 g4 k; s: N  实现原理:2 n$ B& v! `' H1 L8 l" A
  固定div的高度为500px,宽度是100%,超出部分隐藏,以达到自适用浏览器宽度的要求。图片控制宽1920px,适用目前大部分电脑屏幕分辨率,然后就是设置margin了,想要他始终居中,就是中心的位置始终不变。在1920px的情况下,图片的中心x轴就是960px。那么在1800px就是900px,相比与标准的1920px宽度,向左移动了60px,只需要margin左边移动-60px即可。
# c2 u4 g9 i1 t! ]( p  同理在100%的x轴坐标下,margin-left的值就是50%-960px,代码如下:* f+ n2 l, h0 B1 m7 d& T  r# b
  1. <style>
    9 X' t; _" x2 C$ |3 t0 ^% J
  2. #bn {
    0 k7 v/ Y" r2 K2 Q0 P+ K/ P$ m
  3.   background-color:#FF0000;; y" u; z/ |2 {, M- |
  4.   width: 100%;4 Q/ {( W9 Q& _* `0 M# e+ g" {% T6 O6 Z
  5.   height:500px;% Q4 r) f5 t- |3 }3 g0 _  Z* W
  6.   overflow: hidden;
    : e% F) V( ^" ?7 v) s# k7 I. J
  7. }6 o8 Q3 [0 ]- O6 U; u
  8. #bn .img6 h* `9 g) ^, K- j, Q
  9. {/ X8 w( B& f. N* B  o$ x
  10.   width:1920px;8 s! U; E6 u4 `$ X5 x1 I* l7 i
  11.   margin:0 calc(50% - 960px);
    ( c+ i2 b/ D( Y. E2 J) v: m
  12. }
    . }2 T8 j2 K5 q; e8 m2 H8 x8 a
  13. </style># Q' y; X& i2 W

  14. & y* Q* k. ~" k. e  w1 y: [
  15. <div id="bn"><img src="/image/1.jpg" class="img"/></div>
复制代码

: g/ e$ Q# h/ y4 g" n3 R
0 T4 f1 z% a+ R8 L3 @
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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