设为首页
收藏本站
首页
BBS
BBS
服务
聊聊技术,说说经验
娱乐
站务
分享
Share
搜索
本版
帖子
用户
登陆
注册
»
BBS
›
服务专区
›
IT技术
›
图片宽度超出div,css控制图片不改变原大小情况居中显示 ...
返回列表
查看:
6982
|
回复:
0
[网站]
图片宽度超出div,css控制图片不改变原大小情况居中显示,图片超出div部分隐藏
[复制链接]
happyxp
happyxp
当前离线
积分
20212
发表于 2020-4-27 11:51:31
|
显示全部楼层
|
阅读模式
今天做一个网站的banner轮播,程序里面自带的是自动改变图片的高宽比例达到自适用的目的。 目标想法是控制div宽度100%,图片大小不变,div宽度改变的情况下,图片始终居中显示,然后隐藏掉两边的图片。
$ z! M- o& v4 p" u: [; [* U/ ~
2 Z6 t0 o6 p u
实现原理:
; q" g8 H! Q9 _" T$ J7 h
固定div的高度为500px,宽度是100%,超出部分隐藏,以达到自适用浏览器宽度的要求。图片控制宽1920px,适用目前大部分电脑屏幕分辨率,然后就是设置margin了,想要他始终居中,就是中心的位置始终不变。在1920px的情况下,图片的中心x轴就是960px。那么在1800px就是900px,相比与标准的1920px宽度,向左移动了60px,只需要margin左边移动-60px即可。
. ]# E( O: v5 i4 L0 ?- k& x: ?7 I
同理在100%的x轴坐标下,margin-left的值就是50%-960px,代码如下:
* v. w* \ }+ d. A4 g }" o
<style>
3 ~ F; v- B2 }' K2 K9 |
#bn {
Y! k+ A- z( K
background-color:#FF0000;
2 i8 ~" B8 M ~- s
width: 100%;
) Y, m* l/ A) A4 g
height:500px;
# w9 k$ D7 a- K& a3 y2 ?) {% L
overflow: hidden;
0 c/ K4 e4 o+ r1 S
}
1 s3 R. V( u7 q2 S& t) ]
#bn .img
# ?0 x2 Z0 {' A; `# ]! a
{
9 r! X, f8 R) E
width:1920px;
: x' S# e+ S$ ], T
margin:0 calc(50% - 960px);
" r6 t6 u! M# K% f, v" P
}
& ], {2 D- A1 @& t: R `8 A
</style>
6 W1 h7 C Q; P/ t1 B
2 ?3 @' A3 u5 u
<div id="bn"><img src="/image/1.jpg" class="img"/></div>
复制代码
% V5 j! i7 H* s9 o! p% P
% g2 I5 k* n E9 h* }5 z
回复
使用道具
举报
千斤顶
显身卡
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
马上注册
本版积分规则
发表回复
回帖后跳转到最后一页
热议作品
windows IIS服务器中asp php asp.net网站如
12
windows2008安装phpstudy,apache模式,本
10
dede织梦前台显示产品后台管理空白没有数据
10
win10 win8 win7不显示图片缩略图怎么办
10
精华帖子排行
1
前端可视化搭建组件值与联动实现详解
这篇文章主要为大家介绍了前端可视化搭建组件值与联动实现详解,有需要的朋友可以借鉴
查看全文
2
ChatGPT平替- ChatGLM多用户并行访问部署过
这篇文章主要介绍了ChatGPT平替- ChatGLM多用户并行访问部署,本文给大家介绍的非常详
查看全文
3
chatGPT deBug解决管理员登入服务器返回401
这篇文章主要介绍了chatGPT deBug解决管理员登入,服务器返回401,没有拿到数据,有需
查看全文
4
ChatGPT与Remix Api服务在浏览器url地址中
这篇文章主要为大家介绍了ChatGPT与Remix Api服务在浏览器url地址中对话详解,有需要
查看全文
5
Python实现将wav转amr,并转换成hex数组
这篇文章主要介绍了Python实现将wav转amr,并转换成hex数组方式,具有很好的参考价值,
查看全文
6
Python web框架实现增加BasicAuth认证详解
这篇文章主要为大家详细介绍了Python如何在web框架中实现增加BasicAuth认证,文中的示
查看全文
7
深入理解Python虚拟机中描述器的实现原理
这篇文章主要给大家介绍一个我们在使用类的时候经常使用但是却很少在意的黑科技——描
查看全文
8
基于Golang开发一个轻量级登录库/框架
几乎每个项目都会有登录,退出等用户功能,而登录又不单仅仅是登录,我们要考虑很多东
查看全文
9
Python实现动态绘图的示例详解
matplotlib中的animation提供了动态绘图功能,这篇文章主要为大家详细介绍了Python如
查看全文
10
基于Golang开发一个轻量级登录库/框架
几乎每个项目都会有登录,退出等用户功能,而登录又不单仅仅是登录,我们要考虑很多东
查看全文
精彩推荐
VMware Workstations Pro可能无法正常工作
Windows更新导致VMware Workstation无法运行??? 问题: 最近微软发布的更新补丁
查看详细
Win10 SysMain服务是什么?SysMain能不能禁
在Win10升级到Win10 1809之后的版本之后,服务中多了一个SysMain服务,相信很多朋友都
查看详细
Surface/surface book 充电器接口定义
Surface 系列包括 Surface PRO2, PRO3, PRO4,NewPRO,Surface Book, Surface Book2, Su
查看详细
Win10 3月份更新可导致蓝屏 微软已确认(附
每个月的第二个星期二是微软的补丁日,3月份是3月9日发布的,然而这些新补丁又给大家
查看详细
阿里云盘邀请码及激活方法
阿里云盘内部测试版已经上线了,不过,目前还是需要邀请码才可以登录的。很多小伙伴都
查看详细
返回顶部
返回列表