帖子
查看: 12826|回复: 0

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

[复制链接]
发表于 2020-4-27 11:51:31 | 显示全部楼层 |阅读模式
  今天做一个网站的banner轮播,程序里面自带的是自动改变图片的高宽比例达到自适用的目的。  目标想法是控制div宽度100%,图片大小不变,div宽度改变的情况下,图片始终居中显示,然后隐藏掉两边的图片。
3 c0 ^- F' _6 A% M: ^, O% A) e' k# G, T: y7 j
  实现原理:
6 M6 z. ?: T+ k, o  固定div的高度为500px,宽度是100%,超出部分隐藏,以达到自适用浏览器宽度的要求。图片控制宽1920px,适用目前大部分电脑屏幕分辨率,然后就是设置margin了,想要他始终居中,就是中心的位置始终不变。在1920px的情况下,图片的中心x轴就是960px。那么在1800px就是900px,相比与标准的1920px宽度,向左移动了60px,只需要margin左边移动-60px即可。$ l/ b% C! \3 t1 j2 m# z6 r
  同理在100%的x轴坐标下,margin-left的值就是50%-960px,代码如下:0 z( P: r/ d6 j  b
  1. <style>5 C$ H3 t2 i9 e- l. b  N
  2. #bn {
    - v( p7 ~- V4 m# C5 a! D" d
  3.   background-color:#FF0000;& J/ z& s1 z# M4 ]+ Q
  4.   width: 100%;; r0 |- G4 x! @9 Z1 |( `9 X4 \
  5.   height:500px;
    + |2 |" S/ b' D2 `5 v
  6.   overflow: hidden;- z6 c$ x& @; G+ C
  7. }% y$ n- T; S! b- _* L, n  D3 Y0 `
  8. #bn .img
    , w$ ~+ ]' A# }+ J  v2 K! G6 O
  9. {
    % L. m# w# o% O4 x% m
  10.   width:1920px;
    3 g! R! R! F; Y& X+ g/ V, c
  11.   margin:0 calc(50% - 960px);
    " D8 p4 [2 P' i+ `; h# `6 x' w7 [
  12. }
    3 r0 T6 |. A+ S6 d" k5 F/ p  U7 N
  13. </style>* i5 Z, @0 [. }1 b3 o- X- g

  14. 3 T' J/ A! o3 H7 Q+ s; m
  15. <div id="bn"><img src="/image/1.jpg" class="img"/></div>
复制代码

6 K" ]: d& h, q+ {- z* @
' u2 V4 ?- Y3 D+ E! }7 a$ {/ o
回复

使用道具 举报

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

本版积分规则

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

虾皮社区,成立十年了!

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

Copyright © 2007-2019 xp6.org Powered by Discuz

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