个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我想为滚动幻灯片创建媒体查询，以便图像在 1920x1080 显示器上以 960x540 像素的原始分辨率显示；但在 1366x768 显示器上显示为 768x432。我尝试在媒体查询中为较小的屏幕插入重新计算的关键帧值，但它没有用。
如果有人能提供帮助，我将不胜感激，因为我没有广泛使用媒体查询或动画。希望我可以从答案中推断出进一步修改小型设备的幻灯片。
<!DOCTYPE HTML>
<html>
<head>
<style>
.wrapper_video_and_text {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
padding-top: 0px;
justify-content: center;
}
.container_video {
width: 55%;
margin-left: 100px;
}
.wrapper_text {
display: flex;
width: 45%;
overflow: hidden;
min-height: 100%;
justify-content: center;
align-items: center;
}
.video_text {
width: 50%;
font-family: "europa",sans-serif;
font-size: 150%;
letter-spacing: ;
color: black;
font-weight: 500;
line-height: 125%;
}
.flex-container {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
padding-top: 0px;
justify-content: center;
align-items: center;
}
#css_slider {
width: 960px;
height: 540px;
overflow: hidden;
}
#slider_images {
width : 12480px;
height: 540px;
overflow: hidden;
/* animation duration: 36s : 13x ~3s display image + 5x ~0.2s slide */
animation: slide 36s infinite;
-moz-animation: slide 36s infinite;
-webkit-animation: slide 36s infinite;
-o-animation: slide 36s infinite;
}
#slider_images img {
float: left;
}
@keyframes slide{
0%{margin-left: 0px;}
4.7%{margin-left: 0px;}
7.7%{margin-left: -960px;}
12.4%{margin-left: -960px;}
15.4%{margin-left: -1920px;}
20.1%{margin-left: -1920px;}
23.1%{margin-left: -2880px;}
27.8%{margin-left: -2880px;}
30.8%{margin-left: -3840px;}
35.5%{margin-left: -3840px;}
38.5%{margin-left: -4800px;}
43.2%{margin-left: -4800px;}
46.2%{margin-left: -5760px;}
50.9%{margin-left: -5760px;}
53.9%{margin-left: -6720px;}
58.6%{margin-left: -6720px;}
61.6%{margin-left: -7680px;}
66.3%{margin-left: -7680px;}
69.3%{margin-left: -8640px;}
74%{margin-left: -8640px;}
77%{margin-left: -9600px;}
81.7%{margin-left: -9600px;}
84.7%{margin-left: -10560px;}
89.4%{margin-left: -10560px;}
92.4%{margin-left: -11520px;}
97.1%{margin-left: -11520px;}
100%{margin-left: 0px;}
}
@-moz-keyframes slide{
0%{margin-left: 0px;}
4.7%{margin-left: 0px;}
7.7%{margin-left: -960px;}
12.4%{margin-left: -960px;}
15.4%{margin-left: -1920px;}
20.1%{margin-left: -1920px;}
23.1%{margin-left: -2880px;}
27.8%{margin-left: -2880px;}
30.8%{margin-left: -3840px;}
35.5%{margin-left: -3840px;}
38.5%{margin-left: -4800px;}
43.2%{margin-left: -4800px;}
46.2%{margin-left: -5760px;}
50.9%{margin-left: -5760px;}
53.9%{margin-left: -6720px;}
58.6%{margin-left: -6720px;}
61.6%{margin-left: -7680px;}
66.3%{margin-left: -7680px;}
69.3%{margin-left: -8640px;}
74%{margin-left: -8640px;}
77%{margin-left: -9600px;}
81.7%{margin-left: -9600px;}
84.7%{margin-left: -10560px;}
89.4%{margin-left: -10560px;}
92.4%{margin-left: -11520px;}
97.1%{margin-left: -11520px;}
100%{margin-left: 0px;}
}
@-webkit-keyframes slide{
0%{margin-left: 0px;}
4.7%{margin-left: 0px;}
7.7%{margin-left: -960px;}
12.4%{margin-left: -960px;}
15.4%{margin-left: -1920px;}
20.1%{margin-left: -1920px;}
23.1%{margin-left: -2880px;}
27.8%{margin-left: -2880px;}
30.8%{margin-left: -3840px;}
35.5%{margin-left: -3840px;}
38.5%{margin-left: -4800px;}
43.2%{margin-left: -4800px;}
46.2%{margin-left: -5760px;}
50.9%{margin-left: -5760px;}
53.9%{margin-left: -6720px;}
58.6%{margin-left: -6720px;}
61.6%{margin-left: -7680px;}
66.3%{margin-left: -7680px;}
69.3%{margin-left: -8640px;}
74%{margin-left: -8640px;}
77%{margin-left: -9600px;}
81.7%{margin-left: -9600px;}
84.7%{margin-left: -10560px;}
89.4%{margin-left: -10560px;}
92.4%{margin-left: -11520px;}
97.1%{margin-left: -11520px;}
100%{margin-left: 0px;}
}
@-o-keyframes slide{
0%{margin-left: 0px;}
4.7%{margin-left: 0px;}
7.7%{margin-left: -960px;}
12.4%{margin-left: -960px;}
15.4%{margin-left: -1920px;}
20.1%{margin-left: -1920px;}
23.1%{margin-left: -2880px;}
27.8%{margin-left: -2880px;}
30.8%{margin-left: -3840px;}
35.5%{margin-left: -3840px;}
38.5%{margin-left: -4800px;}
43.2%{margin-left: -4800px;}
46.2%{margin-left: -5760px;}
50.9%{margin-left: -5760px;}
53.9%{margin-left: -6720px;}
58.6%{margin-left: -6720px;}
61.6%{margin-left: -7680px;}
66.3%{margin-left: -7680px;}
69.3%{margin-left: -8640px;}
74%{margin-left: -8640px;}
77%{margin-left: -9600px;}
81.7%{margin-left: -9600px;}
84.7%{margin-left: -10560px;}
89.4%{margin-left: -10560px;}
92.4%{margin-left: -11520px;}
97.1%{margin-left: -11520px;}
100%{margin-left: 0px;}
}
</style>
</head>
<section class="flex-container">
<div id="css_slider">
<!-- Each image is 960px by 540px -->
<div id="slider_images">
<img src="web_960_lg_edg_water.jpg" alt="water" />
<img src="web_960_lg_edg_blue.jpg" alt="blue" />
<img src="web_960_lg_edg_robins_egg.jpg" alt="robins egg" />
<img src="web_960_lg_edg_23rd_st.jpg" alt="23rd st" />
<img src="web_960_lg_edg_broken_guru.jpg" alt="broken guru" />
<img src="web_960_lg_edg_i_will_miss_you.jpg" alt="i will miss you" />
<img src="web_960_lg_edg_pants.jpg" alt="pants" />
<img src="web_960_lg_edg_nose.jpg" alt="nose" />
<img src="web_960_lg_edg_swirls.jpg" alt="swirls" />
<img src="web_960_lg_edg_church_ave.jpg" alt="church ave" />
<img src="web_960_lg_edg_network_reality_stars.jpg" alt="network reality all stars" />
<img src="web_960_lg_edg_ports.jpg" alt="ports" />
<img src="web_960_lg_edg_kline.jpg" alt="kline" />
</div>
</div>
<div class="wrapper_text">
<div class="video_text">
<p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here </p>
</div>
</div>
</section>
</html>
最佳答案
我将尝试提供帮助，因为我仍在此处学习，但我相信您需要为您调用的选择器定义媒体查询和属性。此外，如果您希望元素堆叠在一起，请移除 float (如果存在)。
继续这样的事情并重复。让我知道它是否有效。谢谢
/* Media Queries */
@media screen and (max-width: 432px) , screen and (max-height: 768px) {
#slider_images {
width: 1920px;
height: 1080px;
关于css - 用于在不同尺寸设备上显示的滚动幻灯片的媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47299077/
24
4
0
我在为 MacOSX 构建的独立包中添加 DMG 背景的自定义图标时遇到问题。我在项目的根目录中添加了一个包。正在从中加载自定义图标，但没有加载 DMG 背景图标。我正在使用 Java fx 2.2.
Qt for Symbian 和 Qt for MeeGo 有什么区别？我知道 Qt 是一个交叉编译平台。这是否意味着如果我使用来自 Qt 的库，完全相同的库可以在所有支持 Qt 的设备(例如 Sym
我正在尝试使用 C# .NET 3.5/4.0 务实地运行 SQL Server 数据库的备份。我已经找到了如何完成此操作，但是我似乎找不到用于备份的命名空间库。 我正在寻找 Microsoft.Sq
我最近在疯狂学习 Java，但我通常是一名 .NET 开发人员。 (所以请原谅我的新手问题。) 在 .Net 中，我可以在不使用 IIS 的情况下开发 ASP.Net 页面，因为它有一个简化的 Web
这post仅当打印命令中有字符串时才有用。现在我有大量的源代码，其中包含一条声明，例如 print milk,butter 应该格式化为 print(milk,butter) 用\n 捕获行尾并不成功
所以我的问题是: https://gist.github.com/panSarin/4a221a0923927115584a 当我保存这个表格时，我收到了标题中的错误 NoMethodError (u
如何让 Html5 音频在点击时播放声音？ (ogg 用于 Firefox 等浏览器，mp3 用于 chrome 等浏览器) 到目前为止，我可以通过 onclick 更改为单个文件类型，但我无法像在普
如果it1和it2有什么区别？ std::set s; auto it1 = std::inserter(s, s.begin()); auto it2 = std::inserter(s, s.en
4.0.0 com.amkit myapp SpringMVCFirst
我目前使用 Eclipse 作为其他语言的 IDE，而且我习惯于不必离开 IDE 做任何事情 - 但是我真的很难为纯 ECMAScript-262 找到相同或类似的设置。 澄清一下，我不是在寻找 DO
我想将带有字符串数组的C# 结构发送到C++ 函数，该函数接受void * 作为c# 结构和char** 作为c# 结构字符串数组成员。 我能够将结构发送到 c++ 函数，但问题是，无法从 c++ 函
我正在使用动态创建的链接: 我想为f:param附加自定义转换器，以从＃{name}等中删除空格。 但是f:param中没有转换器
是否可以利用Redis为.NET创建后写或直写式缓存？理想情况下，透明的高速缓存是由单个进程写入的，并且支持从数据库加载丢失的数据，并每隔一段时间持久保存脏块？ 我已经搜查了好几个小时，也许是goog
我正在通过bash执行命令的ssh脚本。 FILENAMES=( "export_production_20200604.tgz" "export_production_log_2020060
我需要一个正则表达式来出现 0 到 7 个字母或 0 到 7 个数字。 例如:匹配:1234、asdbs 不匹配:123456789、absbsafsfsf、asf12 我尝试了([a-zA-Z]{0
我有一个用于会计期间的表格，该表格具有期间结束和开始的开始日期和结束日期。我使用此表来确定何时发生服务交易以及何时在查询中收集收入，例如... SELECT p.PeriodID, p.FiscalY
我很难为只接受字符或数字的 Laravel 构建正则表达式验证。它是这样的: 你好<-好的 123 <- 好的 你好123 <-不行 我现在的正则表达式是这样的:[A-Za-z]|[0-9]。 reg
您实际上会在 Repeater 上使用 OnItemDataBound 做什么？ 最佳答案 “此事件为您提供在客户端显示数据项之前访问数据项的最后机会。引发此事件后，数据项将被清空，不再可用。” ~
我有一个 fragment 工作正常的项目，我正在使用 jeremyfeinstein 的 actionbarsherlock 和滑动菜单， 一切正常，但是当我想自定义左侧抽屉列表单元格时，出现异常
最近几天，我似乎平均分配时间在构建我的第一个应用程序和在这里发布问题!! 这是我的第一个应用程序，也是我们的设计师完成的第一个应用程序。我试图满足他所做的事情的外观和感觉，但我认为他没有做适当的事情。
我是一名优秀的程序员,十分优秀！