如何通过 css 控制图片超过屏幕分辨率仍居中显示,且超出部分不显示(不出现滚动条)

2015-04-30 15:53:45 +08:00
 ygf0934

类似这样的

<div class="banner">
    <a href="#"><img src="#" alt=""/></a>
</div>
6875 次点击
所在节点    CSS
4 条回复
luckylion
2015-04-30 17:07:54 +08:00
1:背景形式
2:通过JS获取可视范围,动态调整图片的maring值
gonghao
2015-04-30 17:34:36 +08:00
http://dabblet.com/gist/e191e05066016cb040d4

可以尝试一下这种方法 :)
coraline
2015-04-30 17:52:25 +08:00
假设 img 100x100 px,外层设定为 40x40 px
a {
position: relative;
width: 40px;
height: 40px;
overflow: hidden;
}
img {
position: absolute;
left: 50%;
margin-left: -50px;
top: 50%;
margin-top: -50px;
}
lifang
2015-06-29 23:24:37 +08:00
background:url(xxx.png) center center no-repeat;

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/187544

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX