首页 \ 问答 \ 响应内容滑块有时会削减过多的底部图像(Responsive content slider sometime cuts too much of the bottom off images)

响应内容滑块有时会削减过多的底部图像(Responsive content slider sometime cuts too much of the bottom off images)

http://1aproductions.ots-internet3.net

所以我的无言主题有一个内置的滑块。 它是响应。 滑块位于背景中,高度似乎为100%。 在普通宽度但高的浏览器上,这意味着很多图像隐藏在页面下方内容的白色背景后面。 如果您在滑块位于女王的幻灯片图像上时调整页面大小,您将看到为什么这是一个问题。 我的老板希望它能够始终向她展示她的声音和肩膀。

有没有一种方法,在较长形状的浏览器窗口上,停止图像100%高度,从而使它在更高的浏览器以及正常形状的浏览器上显示更好?

你可能会说我在这个问题上有点深入,所以任何帮助都会很棒!

谢谢


http://1aproductions.ots-internet3.net

So my wordless theme has a built in slider. It is responsive. The slider is in the background and seems to have a height of 100%. On browsers that are normal width but tall this means that a lot of the image is hidden behind the white background of the content lower down the page. If you resize the page while the slider is on the slide image of the queen you will see why this is a problem. My boss would like it to always show her heard and shoulders.

Is there a way of, on longer shaped browser windows, stopping the image from being 100% height and therefore making it display better on longer height browsers as well as normal shaped ones?

As you can probably tell I'm kind of out of my depth on this one, so any help would be fantastic!

Thanks


原文:https://stackoverflow.com/questions/24635246
更新时间:2020-10-16 21:10

最满意答案

幸运的是,你可以快速修复这个特殊的滑块。 这些元素设置为fixed#slider-container .full-bg-image上的背景附件。 清除它,将显示整个图片。 然后,您应该能够使用背景位置更具体地针对移动设备进行对齐,或者仅将桌面使用的固定位置与媒体查询一起使用。 我不确定最好的力量是什么方法:)


Luckily for you there is a quick fix on this particular slider. The elements are set to have a background-attachment of fixed on #slider-container .full-bg-image. Clear it and the whole picture will display. You should then be able to use the background-position to align more specifically for mobile, or only have the fixed position for desktop use with a media query. I'm not sure what method the powers that be would like best :)

2014-07-08

相关问答

更多

需要响应内容滑块(Need a responsive content slider)

查看http://www.swipejs.com/获取基于移动设备的滑动解决方案,或对http://www.woothemes.com/flexslider进行一些调整 Check out http://www.swipejs.com/ for a mobile based swipe solution, or make some adjustments to http://www.woothemes.com/flexslider

jQuery Content滑块阻止响应式菜单抽屉(jQuery Content slider blocks responsive menu drawer)

滑块位于标题上方,因为它具有更高的z-index值。 只需为标题指定更高的z-index值: .header { ... z-index: 10; } 有关堆叠上下文的更多信息,有一篇关于mdn的优秀文章 。 The slider is positioned above the header because it has a higher z-index value. Simply give the header a higher z-index value: .header { . ...

全宽图像滑块(full width images slider)

您可以使用视口高度和宽度。 我创建了一个代码笔 。 希望对你有效。 .slider .content-slides { width: 300vw; } .content-slides .slides { float: left; position: relative; } .content-slides img { width: 100vw; } 在JS中 - 'margin-left': -(pos * Math.max(document.documentEle ...

内容滑块问题(Issue with Content Slider)

css文件中的第132行引用“分页”图像路径。 如果位置已更改,则您需要更新该css文件。 防爆。 background-image:url(../img/pagination.png); 根据你上面所说的,它现在应该是: background-image:url(../../img/slider/pagination.png); Line 132 in the css file references a 'pagination' image path. If the loca ...

响应滑块内的绝对位置内容(Absolute position content within a responsive slider)

我现在设法使用浮点数和负边距对问题进行排序。 对响应式滑块更有效。 例如 .slider .imageLeft { float: left; margin-right: -3.05085%; width: 57.2881%; } .slider .imageRight { float: right; margin-top: 70px; width: 45.7627%; } 如果没有看到实际的滑块,上面的例子对任何人来说都没有多大意义。 但是我会建 ...

CSS3内容滑块可以减少内容(CSS3 Content Slider cuts content off)

您的容器宽度不足以容纳所有图像。 向左移动时,容器的右边框进入视图,无法看到图像。 实现此目的的另一种方法是改变第一个图像的边缘。 更新的codepen CSS #slider img:first-child { -webkit-animation: slide-animation 25s infinite; } @-webkit-keyframes slide-animation { 0% {margin-left:0px; opacity:1;} 20% {margi ...

滑块图像不会显示在移动设备上(Slider images do not display on mobile)

你有.cd-hero-slider .cd-img-container上的display:none 你甚至有评论告诉你 .cd-hero-slider .cd-img-container { /* hide image on mobile device */ display: none; } You have display:none on .cd-hero-slider .cd-img-container You even have a comment tell you that .c ...

让我的jQuery滑块响应(Making my jquery slider responsive)

看看这个 。 我相信发生了什么事情是你的下一个和上一步调整到屏幕的高度,而不是像你希望的图像的高度。 所以要自定义它,首先将图像的高度和宽度设置为您想要的任何值,为您的按钮匹配相同的高度,并且只要它们位于相同的父div中它就应该匹配 <html> <head> <title>Image carousel</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet ...

滑块内容随滑块移动(Slider content moving along with slider)

处理影响动画的属性时,您需要非常小心选择器。 .go-right div和.go-left div选择器正在影响.go-right和.go-left每个兄弟,而你可能只想让直接兄弟姐妹(幻灯片)受到影响,所以我用它们替换它们.go-right>div和.go-left>div : var theSlider = { track: document.querySelector('.m-tract-slider-wrapp'), // has to match `transition-du ...

响应内容滑块有时会削减过多的底部图像(Responsive content slider sometime cuts too much of the bottom off images)

幸运的是,你可以快速修复这个特殊的滑块。 这些元素设置为fixed在#slider-container .full-bg-image上的背景附件。 清除它,将显示整个图片。 然后,您应该能够使用背景位置更具体地针对移动设备进行对齐,或者仅将桌面使用的固定位置与媒体查询一起使用。 我不确定最好的力量是什么方法:) Luckily for you there is a quick fix on this particular slider. The elements are set to have a ...

相关文章

更多

最新问答

更多
  • 如何在CSS中进行自定义文本编辑并在学校项目中获取错误(How to do custom text editing in CSS and getting a error in a school project)
  • 获取列表中最长的元素(Get the longest element of a list)
  • Files.copy(Path,Path)是否创建目录?(Does Files.copy(Path,Path) create directories?)
  • 如何在ajax请求完成后1秒递归调用函数?(How to recursively call a function 1 second after an ajax request is done?)
  • 如何统计销售量,城市,商品使用情况的客户oracle(How to statistics sales, city, customer of goods use oracle)
  • 无法从命令行覆盖pom maven-surefire-plugin(Cannot overwrite pom maven-surefire-plugin from command line)
  • 根据Select2 4.0中的值应用css类(Applying css class according to value in Select2 4.0)
  • 使用Jackson(Polymorphic)进行反序列化时缺少字段(Missing field when deserializing using Jackson (Polymorphic))
  • 使用PHP的即时警报通知功能(Instant Alert notification feature using PHP)
  • 与以前的密码相比(Comparing with previous passwords)
  • 从现金流中获取特定行(Getting specific line from Cash Flow)
  • Citrix:无法使用MDKToolkit包装apk(Citrix: can't wrap apk using MDKToolkit)
  • 流星角色包的灵活性如何?(How flexible is meteor-roles package?)
  • 带有多个按钮的Google扩展程序(Google Extension with more than one button in the toolbar)
  • php setTimezone同时出现不同的结果(php setTimezone different result for the same time)
  • 搜索不使用jQuery调用json(Search not working using jQuery with call to json)
  • 如何打印文件的内容?(How do I print out the contents of a file? C++ File Stream)
  • Django自定义包含标签(Django Custom Inclusion Tags)
  • Java Jtree mouseEvent如果没有选择任何内容(Java Jtree mouseEvent if nothing is selected)
  • 通过哈希对象循环获取次数(Get number of times in loop over Hash object)
  • Python转义序列复杂输出(Python escape sequence complex output)
  • 将列表对象中的字符串转换为逗号分隔(Convert string in list objects to comma separated)
  • 如何限制特定字符在laravel 5.4中的字符串?(How to limit string in laravel 5.4 from specific char?)
  • 如何从浏览器调用appengine servlet(how to call appengine servlet from browser)
  • Excel条件格式更改整个行颜色(Excel conditional formatting to change entire row color)
  • 在JTable中显示数据库中的数据(Displaying data from database in JTable)
  • 在android中附加文件的问题(Issue on appending a file in android)
  • 在数组中输入值(Make in input value as in array)
  • Haml + ActionMailer - Rails?(Haml + ActionMailer - Rails?)
  • 在tomcat上部署的grails war没有连接到数据库(grails war deployed on tomcat is not connecting to database)