- objective-c - iOS 5 : Can you override UIAppearance customisations in specific classes?
- iphone - 如何将 CGFontRef 转换为 UIFont?
- ios - 以编程方式关闭标记的信息窗口 google maps iOS
- ios - Xcode 5 - 尝试验证存档时出现 "No application records were found"
我正在关注 this great tutorial from SitePoint在我网站的一些图片上实现点击时全屏显示。
我的代码与the example provided by SitePoint 非常相似,但这是我的代码:
<figure class="fullscreenOnClick">
<img src="https://dw-uploads.s3.eu-central-1.amazonaws.com/photos/originals/359c0687ae12e32bb5f26f2005763b73">
</figure>
$('.fullscreenOnClick').on('click', function(e) {
e.preventDefault;
var elem = this;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else {
alert("Sorry, your browser is too old and doesn't support fullscreen :-(")
}
});
http://jsfiddle.net/xnyj9wr5/ (不工作 - 再次,see SitePoint example)
我的问题是 Firefox 和 IE 按我的预期显示全屏图像:图像以其原始大小显示,居中。
Chrome 导致了这个问题:图像只是在黑色背景上居中,并保持其当前大小。
如何让 Chrome 像 Firefox 和 IE 一样全屏显示?
请注意:我必须将全屏效果应用到外部元素,而不是 img 本身,否则图像会被拉伸(stretch)。
最佳答案
您的图形元素的样式为 width: 30%
。这导致了 Chrome 中的问题。
根据 MDN在“演示文稿差异”部分下:
It's worth noting a key difference here between the Gecko and WebKit implementations at this time: Gecko automatically adds CSS rules to the element to stretch it to fill the screen: "width: 100%; height: 100%". WebKit doesn't do this; instead, it centers the fullscreen element at the same size in a screen that's otherwise black. To get the same fullscreen behavior in WebKit, you need to add your own "width: 100%; height: 100%;" CSS rules to the element yourself:
#myvideo:-webkit-full-screen { width: 100%; height: 100%; }
On the other hand, if you're trying to emulate WebKit's behavior on Gecko, you need to place the element you want to present inside another element, which you'll make fullscreen instead, and use CSS rules to adjust the inner element to match the appearance you want.
我能够使用 Chrome 的开发人员工具将建议的 css 添加到您在评论中链接的松鼠图片,并且它显示了正确的大小。但是,它周围确实有一个白色框(似乎来自图形元素)。
我会尝试更改您的 javascript,因为 @AdamFischer 建议使图像本身全屏显示而不是 figure 标签并添加适当的 css。如果这不是一个选项,您可以将 css 应用于图形元素,然后根据需要进行调整以获得所需的外观。 (请注意,它是特定于 webkit 的 css,因此它不应干扰其他浏览器。)我还成功地将图形包装在另一个元素(如 span 或 div)中并将全屏 css 应用于该元素并删除了 width:30%
从图中看
关于javascript - 在 Chrome 中请求全屏 : image remains small,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32618762/
matplotlibrc 示例文件指出: ## The font.size property is the default font size for text, given in pts. ## 1
在 HTML/CSS 中,可以通过以下方式指定字体大小(已弃用,但所有浏览器都支持): text n 是 {1, 2, 3, 4, 5, 6, 7} 的一个元素。 另一种可能性是: text s 是
我看到很多地方都在谈论插入排序如何适用于小型数据集。不过,我找不到“小”的数字。我的猜测是没有绝对的答案,这取决于运行代码的机器类型。 但是,什么因素决定了插入排序是一个好主意的阈值是多少? “小”的
我为操作栏按钮尝试了两种不同的进度条样式,通过 refreshMenuItem.setActionView(R.layout.actionbar_indeterminate_progress); ac
这个问题可能需要一些编译器知识才能回答。我目前正在做一个项目,我将在其中创建一个数组,可能是 int[2][veryLargeNumber] 或 int [veryLargeNumber][2] 逻辑
请帮助我理解。我是一名技术专家,并试图确定在使用WhatsApp Cloud API执行分配给我的业务任务时是否会有任何限制。。在WhatsApp Business Account文档中,我看到了许多
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题? 更新问题,以便 editing this post 可以用事实和引用来回答它. 关闭 6 年前。 Improve
我正在尝试对我的一个项目进行“小规模”优化。 有一系列单独很小的数组访问,但分析表明这些数组访问是我的程序的绝大多数时间花费的地方。所以,是时候让事情变得更快了,因为程序大约需要一个小时才能运行。 我
我正在为一个新网站整理我的排版,并且 出现了一个奇怪的现象标签 - 它把我的行高扔掉了。其他一切都很好(标题标签、段落等),但 small正在把它扔到某个地方。 这是我的意思的图像: 我的问题是这个
我的一个客户因为他的网站显示“太小”而大惊小怪。 This is the site in question对我来说它看起来不错。 他附上了一张截图,很明显他遇到这个问题只是因为他“缩小了”。 有没有办
关闭。这个问题是off-topic .它目前不接受答案。 想改进这个问题吗? Update the question所以它是on-topic用于堆栈溢出。 关闭 12 年前。 Improve thi
我已经使用相同的值行高、垂直边距和填充设置了垂直对齐,但是当有一个较小的元素时,比如 标记,在流中,它破坏了一些像素的垂直节奏,我可以解决添加 vertical-align:top/bottom 但是
我试图创建输入,它在两侧具有 border-bottom 和小(高度)边框,如下所示: 但是这段代码不起作用: input:before, input:after { display: blo
我有以下 fiddle : http://jsfiddle.net/tompazourek/sn5jp/ some normal-sized text some small-sized text p
我使用 MASS::qda() 来查找我的数据的分类器,并且它总是报告 `some group is too small for 'qda' 这是由于我用于模型的测试数据的大小吗?我将测试样本大小从
我想重新组织我们的 Storyboard。我们有大约 25 个小 Storyboard和大约 5 个大 Storyboard。大的太大(在 xCode 中工作时会影响性能)。小的有时只包含一两个场景。
我的产品流程中有一个方面让我浪费了时间。 假设我在集合中有一个类似命名项目的列表,但它们的大小不同 id base_name sizing sum_dimensions
我正在制作一个解析 html 并从中获取图像的应用程序。使用 Beautiful Soup 可以轻松解析并下载 html,图像也可以使用 urllib2。 我确实在 urlparse 中遇到问题,无法
我创建了一个新的 Android 资源目录来支持不同的屏幕尺寸。我在 dimens.xml 中外包了所有硬编码尺寸和 TextSize。但是我的 values-small 目录没有被 Android
我只是出于好奇才问这个问题。 如果您使用 tag 3 次,tag 内的单词按预期变小 3 倍。这是否是一种可用的做法,为什么? Lorem Ipsum dolor sit amet 最佳答案 通常将
我是一名优秀的程序员,十分优秀!