设为首页
收藏本站
首页
BBS
BBS
服务
聊聊技术,说说经验
娱乐
站务
分享
Share
搜索
本版
帖子
用户
登陆
注册
»
BBS
›
服务专区
›
IT技术
›
图片宽度超出div,css控制图片不改变原大小情况居中显示 ...
返回列表
查看:
9715
|
回复:
0
[网站]
图片宽度超出div,css控制图片不改变原大小情况居中显示,图片超出div部分隐藏
[复制链接]
happyxp
happyxp
当前离线
积分
20316
发表于 2020-4-27 11:51:31
|
显示全部楼层
|
阅读模式
今天做一个网站的banner轮播,程序里面自带的是自动改变图片的高宽比例达到自适用的目的。 目标想法是控制div宽度100%,图片大小不变,div宽度改变的情况下,图片始终居中显示,然后隐藏掉两边的图片。
7 P+ l" g s9 _4 A, L
1 j. Y) n4 C5 e
实现原理:
! i# A% ?* F) r" L
固定div的高度为500px,宽度是100%,超出部分隐藏,以达到自适用浏览器宽度的要求。图片控制宽1920px,适用目前大部分电脑屏幕分辨率,然后就是设置margin了,想要他始终居中,就是中心的位置始终不变。在1920px的情况下,图片的中心x轴就是960px。那么在1800px就是900px,相比与标准的1920px宽度,向左移动了60px,只需要margin左边移动-60px即可。
! H# S& j1 C5 v' ]' a5 _
同理在100%的x轴坐标下,margin-left的值就是50%-960px,代码如下:
. w( Y8 Z2 d3 X) R
<style>
5 L& I- h1 t6 z- t \ S4 P
#bn {
h3 n! {0 w1 n% C! w: `& n
background-color:#FF0000;
6 p y4 C; X# Y8 Q0 A0 I4 v4 D
width: 100%;
% \/ [0 q9 e9 P7 _" e) p- A
height:500px;
9 S1 y# y: q$ D
overflow: hidden;
7 {2 Z g$ _6 N( _2 |" H, ]- T. B
}
# ~( e* N0 y: g" H' W
#bn .img
7 s3 Y6 ^& X( K3 U
{
0 U3 u+ Q# Z! u+ U
width:1920px;
, W% g* I/ g; h6 l7 E
margin:0 calc(50% - 960px);
; x* i8 [2 B* _) G, J7 ~
}
! g% f% K# _0 p
</style>
$ ?2 |+ z- _' ~7 |
% b" ^- P* ~! s% L
<div id="bn"><img src="/image/1.jpg" class="img"/></div>
复制代码
! c/ P1 ~8 T& ~4 U5 n# `
% w6 v( y9 i3 \4 z( Z1 r5 o$ [
回复
使用道具
举报
千斤顶
显身卡
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
注册帐号
本版积分规则
发表回复
回帖后跳转到最后一页
热议作品
windows IIS服务器中asp php asp.net网站如
12
Win10正版重做系统之后出现未激活如何解决
11
win10 win8 win7不显示图片缩略图怎么办
10
dede织梦前台显示产品后台管理空白没有数据
10
精华帖子排行
1
skype提示遗憾的是,您的链接有问题。请检
今天在使用skype给客户做网页链接的时候出现提示:遗憾的是,您的链接有问题。请检查
查看全文
2
css设置当字数超过限制后以省略号显示...
1、文字超出一行省略,超出部分显示… 用text-overflow:ellipsis,需要加宽度width属
查看全文
3
怎样把多个文件夹里的文件合并到一个文件夹
从网上下载下来的文件有的时候会有很多文件夹,然后一个文件夹里一个文件,要看的话
查看全文
4
打印机SHARP AR-M160 PCL6打印文件出现USER
打印机SHARP AR-M160 PCL6在打印文件前先出一份显示USE NAME,FILE NAME,From and Prin
查看全文
5
如何解决Win10打印机共享0x00000709错误_wi
今天同事的打印机突然无法使用,打印提示找不到打印机,从局域网里直接打开共享打印机
查看全文
6
Windows 11/10修复创建TLS客户端凭据时发生
Windows 11/10修复创建TLS客户端凭据时发生致命错误"内部错误状态为10013" 升
查看全文
7
VMware Workstations Pro可能无法正常工作
Windows更新导致VMware Workstation无法运行??? 问题: 最近微软发布的更新补丁导
查看全文
8
b550主板相比b450主板提升大吗?B450和B550
从命名来说,B550是B450的升级版,那么b550主板相比b450主板提升大吗?下面蛇皮社区分
查看全文
9
Beyond Compare 提示错误“这个授权密钥已
错误提示:这个授权密钥已被吊销。解决方法:删除以下目录中的所有文件即可。win(窗
查看全文
10
2022年3月份CPU天梯图(已更新12代intel)
CPU天梯图更注重综合性能,只具有参考意义,选择CPU要根据需求选择。生产力用户更偏重
查看全文
精彩推荐
怎样把多个文件夹里的文件合并到一个文件夹
从网上下载下来的文件有的时候会有很多文件夹,然后一个文件夹里一个文件,要看的话
查看详细
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日发布的,然而这些新补丁又给大家
查看详细
返回顶部
返回列表