Javascript 如何使页脚中的图像具有响应性？_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 如何使页脚中的图像具有响应性？

javascript jquery html css twitter-bootstrap

Javascript 如何使页脚中的图像具有响应性？,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我们正在为这个页面使用引导和JavaScript，但我们不确定如何使页脚图像响应。页面上的其他元素是响应性的，但它只是页脚图像我已经包括了整个HTML和CSS代码 /*CSS文档*/ @字体{ 字体系列：futura； src:url../font/Futura-Book.ttf； } @字体{ 字体系列：futura italic； src:url../fonts/Futura_ICG_Book_sloblate.ttf；字体风格：斜体，斜体； } 桌子{ 边界塌陷：塌陷； } .线路{

我们正在为这个页面使用引导和JavaScript，但我们不确定如何使页脚图像响应。页面上的其他元素是响应性的，但它只是页脚图像

我已经包括了整个HTML和CSS代码

/*CSS文档*/ @字体{ 字体系列：futura； src:url../font/Futura-Book.ttf； } @字体{ 字体系列：futura italic； src:url../fonts/Futura_ICG_Book_sloblate.ttf；字体风格：斜体，斜体； } 桌子{ 边界塌陷：塌陷； } .线路{ 边框底部：3px实心6e6e9a； } 白色的{ 颜色：白色； } /*----------------所有页面--------------------*/ /*体型*/ * { 字体系列：futura，verdana；框大小：边框框； } h1{ 字体系列：futura，verdana；文本对齐：居中；字体大小：24px； } p{ 字体大小：14px； } th{ 字体大小：16px； } 运输署{ 字体大小：14px； } 身体{ 保证金：自动；最小宽度：600px； } /*导航样式*/ 导航{ 列表样式类型：无；填充：0px；溢出：隐藏；背景色：4a486d；保证金：0自动；最小宽度：100px；最大宽度：950px；文本对齐：居中； } 导航集装箱{ 宽度：100%；背景色：4a486d； } 搜寻{ 宽度：20px；高度：15px；右边填充：6px； } 导航a{ 显示：内联块；颜色：白色；文本对齐：居中；填充：14px 16px；文字装饰：无； } 导航a：悬停{ 背景色：1c1c；文字装饰：无；颜色：白色； } 导航a：已访问{ 背景色：1c1c；文字装饰：无；颜色：白色； } /*巨无霸风格*/ 琼伯伦先生{ 文本对齐：居中；边界半径：25px；背景色：白色；填充：0px；保证金：0自动；边缘底部：30px；边缘顶部：30px；明确：两者皆有； } 标志{ 宽度：240px；高度：140像素； } /*容器样式*/ .集装箱{ 文本对齐：居中；填充：2%；明确：两者皆有；宽度：100%；保证金：0自动； } /*背景色*/ 背柱{ 身高：100%； } /*左链接样式*/ 侧导航{ 列表样式类型：无；保证金：0；填充物：5px；左侧填充：10px；宽度：16%；背景色：F5F9；位置：绝对位置；身高：55%；溢出：自动；明确：两者皆有；文本对齐：左对齐；浮动：左；边界半径：2px； } 李阿{ 显示：块；颜色：1C1C；填充：8px0px25px；文字装饰：无；填充：8px； } 李安：很活跃{ 文字装饰：无；字体大小：粗体； } li a:悬停：未激活{ 背景色：1c1c；颜色：白色；文字装饰：无； } 左导航填充{ 填充：10px； } 搜索栏{ 高度：15px；宽度：15px；保证金：1px； } 快的{ 边界半径：2px；填充：0；位置：绝对位置；明确：两者皆有；浮动：左； } /*图片样式*/ 图片{ 宽度：50%；行程：8e8db7；笔画宽度：4；保证金：自动； } 图2{ 宽度：30%；行程：8e8db7；笔画宽度：4；保证金：自动；填充顶部：45px；填充底部：57px； } /*按钮样式*/ 钮扣{ 背景色：6e6e9a；边界：无；颜色：白色；填充：5px15px；文本对齐：居中；显示：内联块；字号：18px；光标：指针；边界半径：2px；保证金：4倍； } 按钮：悬停{ 背景色：1c1c； } .VP按钮{ 填充顶部：0px； } .profiles按钮{ 边际上限：0px； } /*形式风格*/ 形式{ 文本对齐：居中；填充顶部：60px； } label.formLabel{ 显示：块；利润率：10px；填充：10px；保证金：0自动；宽度：300px；字体大小：16px；字体大小：粗体； } 字段集{ 利润上限：-30px；边框：2个实心515078； } 传奇{ 颜色：515078；字号：18px； } 现场订单{ 边框：1个点8685a7； } 字段设置顺序2{ 边框：1px虚线8685a7； } 传奇左派{ 文本对齐：左对齐； } 阿斯特里克斯女士{ 颜色：红色； } .trcolor{ 背景色：8a87a2； } /*页脚*/ 页脚{ 背景色：b1b2d2；颜色：1C1C；文本对齐：居中；高度：158px；明确：两者皆有；边缘顶部：10px； } 页脚p{ 右边距：150px；填充顶部：60px； } 脚印{ 浮动：左；左边距：0px；高度：130像素；宽度：188px；利润率：1%；填充：10px； } /*页脚中的社交媒体按钮*/ .社会媒体{ 浮动：对；利润率：1%；填充顶部：40px； } .社会媒体：悬停{ 背景色：1c1c； } /*容器样式*/ 集装箱宽度{ 宽度：960px； } /*配置文件页面样式*/ 头衔{ 颜色：白色；字体大小：粗体；字体大小：20px；文本对齐：居中； } 标题2{ 颜色：白色；字体大小：粗体；字号：18px；文本对齐：居中； } 标题3{ 颜色：白色；字体大小：粗体；字体大小：16px；利润率最高：20%；文本对齐：左对齐；左侧填充：20px； } 标题4{ 颜色：白色；字体大小：粗体；字体大小：16px；填充顶部：25px；文本对齐：左对齐；左侧填充：20px； } 正文{ 颜色：白色；字体大小：14px；文本对齐：左对齐；左侧填充：20px； } 托帕德先生{ 填充顶部：40px； } .底边{ 边缘底部：800px； } .Line td{ 边框底部：1px soli d 6e6e9a； } 查询类型，长途行走个人信息，可选信息{ 填充：3倍；利润率：10px； } 太空底{ 边缘底部：20px； } /*-----------------------------------*/ /*----------------索引页--------------------*/ 箭{ 浮动：左；填充：10px；利润率：10px；位置：相对位置； } 内向{ 字体系列：futura bold；颜色：白色；字体大小：50px；填充顶部：10px； } 内文{ 填充：10px；利润率：10px；字体系列：Futura，无衬线；字体大小：15px；颜色：白色；文本对齐：对齐；线高：1.5em； } heximages{}hexstyle{ 身高：18%；宽度：18%；填充：10px；保证金：0自动；位置：相对位置； } 背{ 填充顶部：20px；填充底部：150px；边缘底部：0px； } 上校{ 背景色：555b8f； } /*-----------------------------------*/ /*----------------登录页面开始--------------------*/ 分隔容器2{ 高度：550px；宽度：550px；保证金：0自动；位置：相对位置； } 引子{ 高度：550px；宽度：550px；保证金：0自动；位置：绝对位置；文本对齐：居中；填充顶部：120px；背景图片：url../images/login.jpg；背景重复：无重复；背景尺寸：550px 550px； } /*按钮样式*/ .按钮布局{ 宽度：150px；高度：60px；填充物：3.5px 3px；字号：18px；字体系列：futura；利润率：10px自动； } 宾客按钮{ 页边顶部：-1px；衬垫：-3.5px-3px； } .显示块{ 显示：块；宽度：150px；高度：60px；填充物：3.5px 3px；保证金：0自动；边缘底部：20px；字号：18px；字体系列：futura； } 罗金迪夫{ 高度：550px；宽度：550px；保证金：0自动；位置：绝对位置；填充顶部：80px；背景图片：url../images/login.jpg；背景重复：无重复；背景尺寸：550px 550px； } 登录表单{ 保证金：0自动；宽度：350px； } input.form{ 字体系列：futura italic；填充：3倍；利润率：10px；边界半径：2px；边框：1px实心1c1c；高度：30px；字体大小：14px；宽度：200px；文本对齐：居中；颜色：6e6e9a； } 登记处IV{ 高度：550px；宽度：550px；保证金：0自动；位置：绝对位置；文本对齐：居中；背景图片：url../images/login.jpg；背景重复：无重复；背景尺寸：550px 550px； } 注册执行{ 文本对齐：居中；边缘顶部：80px； } /*----------------登录页面完成--------------------*/ /*----------------我的个人资料--------------------*/ /*隐藏导航按钮*/ 隐藏{ 浮动：左；左：0px；顶部：0px；保证金：5px； } .清楚{ 明确：两者皆有； } /*六边形轮廓图像样式*/ svg{ 宽度：19%；行程：8e8db7；笔画宽度：4； } 档案信息{ 宽度：90%；高度：750px；背景色：6a6cae；保证金：0自动； z指数：3；位置：相对位置；边界半径：2px；溢出：隐藏；填充：10px； } .profileback{ 文本对齐：居中；填充：2%；明确：两者皆有；宽度：100%；保证金：0自动；背景图片：url../images/back.jpg；背景重复：无重复； } 输入[类型=文件]{ 显示：无； } .自定义文件上载{ 填充：6px 12px；光标：指针；背景色：无；位置：绝对位置；右：70px；宽度：54px； } 马金贝托姆{ 边缘底部：50px； } /*-----------------------------------*/ /*----------------POD搜索页面开始--------------------*/ 基本文本{ 文本对齐：左对齐；填充：11px；填充底部：24px；保证金：5px； } 引述{ 文本对齐：左对齐；颜色：4a486d；字体大小：16px；填充：10px；填充顶部：65px； } 海勒布顿先生{ 垫面：5px；宽度：70px；填充物：5px； } 雇佣{ 宽度：70px；高度：70像素； } /*----------------POD搜索页面完成--------------------*/ /*----------------POD配置文件页面开始--------------------*/ 询问{ 宽度：150px；高度：50px；边际：0px；利润上限：-10px；边缘底部：50px； } 分隔容器{ 宽度：700px；高度：700px；保证金：0自动；利润底部：5%； } 技巧{ 宽度：330px；高度：750px；背景色：6e6e9a；保证金：0自动；浮动：左； z指数：2；位置：相对位置；边界半径：2px；溢出：隐藏； } 技能列表{ 颜色：白色；字体大小：粗体；字体大小：16px；利润率最高：20%；文本对齐：左对齐；左侧填充：20px；列表样式类型：无； } 生物{ 宽度：330px；高度：750px；背景色：8a83d1；保证金：0自动；浮动：左；左边距：-150px； z指数：3；位置：相对位置；边界半径：2px；溢出：隐藏；填充：10px； } 工作历史{ 宽度：330px；高度：750px；背景色：6a6cae；保证金：0自动；浮动：左；左边距：-150px； z指数：1；位置：相对位置；边界半径：2px；溢出：隐藏；文本对齐：居中； } /*----------------POD配置文件页面完成--------------------*/ /*----------------立即预订页面开始--------------------*/ 标签{ 显示：内联块；宽度：220px；字体大小：16px；字体大小：粗体； } input.form1{ 字体系列：futura italic；填充：3倍；利润率：10px；边界半径：2px；边框：1px实心1c1c；高度：30px；字体大小：14px；宽度：200px；文本对齐：居中；颜色：6e6e9a； } booknowFieldset{ 边框：1px虚线； } /*----------------书现在完成页面--------------------*/ /*----------------当前博金页开始--------------------*/ 当前预订表， .预订， .预订{ 文本对齐：居中；利润率：10px； } .预订{ 最大宽度：400px；最小宽度：50px； } /*----------------当前博金页面完成--------------------*/ /*----------------历史预订--------------------*/ 桌子 th，运输署{ 利润率：10px；填充：10px； } /*表格样式*/ 桌子 th，运输署{ 文本对齐：居中；利润率：10px；左缘：20%； } 运输署{ 最大宽度：300px；最小宽度：100px；最小高度：300%；利润率：10px；背景色：白色； } th{ 填充：10px；颜色：白色； } /*-----------------------------------*/ /*----------------联系我们--------------------*/ input.inputstyle{ 字体系列：futura italic；填充：3倍；利润率：10px；边界半径：2px；边框：1px实心1c1c；高度：30px；字体大小：14px；宽度：200px；文本对齐：居中；颜色：6e6e9a； } 颜色{ 背景色：白色； } /*-----------------------------------*/ 登录页面切换导航你好，欢迎来到Pod SharpFutures是一家支持年轻人在创意数字领域就业的社会企业。通过提供一系列干预措施，包括学徒制、工作经验和志愿服务，SharpFutures培育了这种转变投入工作，同时应对创意数字业务不断变化的需求。我们通过教育服务传播理念，通过提供就业机会和实际工作经验培养最优秀的人才，并通过这种服务的销售。

SharpFutures是一家支持年轻人在创意数字领域就业的社会企业。通过提供一系列干预措施，包括学徒制、工作经验和志愿服务，SharpFutures培育了这种转变投入工作，同时应对创意数字业务不断变化的需求。我们通过教育服务传播理念，通过提供就业机会和实际工作经验培养最优秀的人才，并通过这种服务的销售。

©；夏普期货2016/其他信息

您可以使用以下命令

<img class="img-responsive" src="/path/to/image/file">

您还可以检查引导

将大小、宽度和高度添加到图像的容器中，然后添加宽度：100%；到img元素本身。

看起来您已经在css中设置了宽度和高度：

#footlogo {
  float: left;
  margin-left: 0px;
  height: 130px;
  width: 188px;
  margin: 1%;
  padding: 10px;
}

您是否尝试过删除该类并应用img responsive类？

尝试将class=img responsive添加到图像，这是一个引导类您是否刚刚向我们提供了整个页面和css？您不需要在Bootstrap中使用大写字母S，在Javascript lol中使用大写字母J：我们确实尝试将img响应类添加到i

你说的图像是指社交图标图像吗？@TimWilkinson更好：使用图标字体你得把html部分拖出来一点，我把页脚隐藏得很小