腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
(9999+)
视频
沙龙
2
回答
iframe
在
纵横
比
和
响应
性
方面
类似于
图像
元素
javascript
、
html
、
css
、
iframe
有plenty solutions的宽度是
响应
式的,
iframe
保留
纵横
比
,但我找不到一个解决方案,也纳入了
iframe
高度以及。关于上面的解决方案,如果
iframe
解决方案有一个高度可以改变的父div,那么如果高度太小而不是
响应
性
的,解决方案只会切断
iframe
的底部。我需要一个解决方案,适用于当您有一个变化的高度
和
宽度的父
元素
的情况下,
在
不同的设备
和
视图端口大
浏览 28
提问于2020-02-02
得票数 0
1
回答
当存在多个
iframe
时如何做出
响应
iframe
html
、
css
、
iframe
如何允许容器内任意数量的
iframe
来容纳
iframe
并保持其
纵横
比
? 创建
响应
性
YouTube嵌入的关键是使用填充
和
容器
元素
,这允许您给它一个固定的
纵横
比
。您还可以
在
大多数其他基于
iframe
的嵌入式系统中使用此技术,如幻灯片演示。以下是具有固定宽度
和
高度的典型YouTube嵌入代码的样子: <
iframe
width=&quo
浏览 4
提问于2017-07-26
得票数 0
5
回答
最大宽度
和
高度的
响应
式
iframe
css
、
iframe
、
responsive-design
我有一个固定高度的容器,里面既有图片又有
iframe
。要使
图像
响应
并防止垂直
和
水平溢出,我只需设置以下CSS即可: max-width: 100%;} 这确保肖像
图像
不会垂直溢出,而风景
图像
不会水平溢出对于
iframe
,我使用“padding”,将包装器
元素
的填充设置为
iframe
的
纵横
比
(例如,对于16:9的视频,为56.25% )
浏览 1
提问于2014-02-08
得票数 20
1
回答
在
AMP中包含具有正确
纵横
比
的
图像
,而无需知道高/宽
css
、
amp-html
有没有办法
在
不知道
图像
的宽度
和
高度的情况下在AMP中包含
图像
?我也尝试过layout=fill,它保持宽高比,但如果给定的高度/宽度大于原始
图像
浏览 2
提问于2018-03-05
得票数 1
2
回答
如果在母体内部没有高度
和
底部填充,则为零高度。
html
、
css
、
iframe
、
responsive-design
我使用了经典的
响应
设计技巧,将基于百分
比
的padding-bottom
和
零高度应用于
元素
,以使其保持一定的
纵横
比
。在这个
元素
中是一个高度为100%的
iframe
。这是一个
在
chrome中的工作,但是firefox
和
IE没有显示
iframe
,就好像它没有高度一样。我尝试过将box-sizing: content-box作为IE的解决方案,但它什么也没做。小提琴: 如何使
iframe
在
浏览 3
提问于2014-05-23
得票数 3
回答已采纳
1
回答
将固定网格改造为
响应
网格
javascript
、
jquery
、
css
、
grid
、
responsive-design
有两项要求: 卡的尺寸不应该固定。
浏览 3
提问于2013-09-20
得票数 0
回答已采纳
1
回答
将
图像
和
视频动态拟合到
iframe
中
javascript
、
php
、
css
、
iframe
我使用Laravel 从数据库中检索
图像
,并在我正在创建的博客应用程序中显示它们。我决定使用'
iframe
‘标签,以便在博客中检索
和
显示
图像
、
和
视频。然而,我遇到的问题是CSS相关的,我正在尝试对'
iframe
‘进行样式设计,这样它就可以将其大小调整到不同大小的
图像
和
视频,并同时保留它们的
纵横
比
。现在,小
图像
显示良好,但如果我使用大尺寸的
图像
,任何宽度大于800
浏览 2
提问于2015-01-08
得票数 0
1
回答
调整宽径比为4:3至16:9的
图像
大小,而不丢失css的
响应
行为
html
、
css
、
bootstrap-5
假设我的
图像
(640x480)为4:3的
纵横
比
:显示它的代码是:我想要的是
在
16:9 (
图像
的实际
纵横
比
,尺寸是640x360):很明显,做16因此,如果为“高度:360 of”
和
“宽度: 10
浏览 9
提问于2022-09-11
得票数 0
回答已采纳
1
回答
映像在引导上
响应
不够快
css
、
responsive-design
、
frameworks
、
image-scaling
我正在使用Bootstrap,我有一个大约3000 x 2000像素的大
图像
。我想要的
图像
是
响应
性
的时候加载的样式调用宽度为300
和
高度为300像素。如何在不破坏
图像
的情况下使
图像
具有
响应
性
?
浏览 2
提问于2017-01-16
得票数 0
4
回答
离子电容器- Android喷溅屏
响应
度
android
、
angular
、
ionic-framework
、
splash-screen
、
capacitor
上下文问题换句话说,本机实现导致启动
浏览 4
提问于2021-02-19
得票数 12
回答已采纳
1
回答
如何使用海报
图像
填充视频
元素
,即使海报
图像
与其视频
元素
的
纵横
比
不同?
html
、
css
、
html5-video
就目前而言,这只
在
WebKit中进行了测试。 当使用poster属性
在
<video>
元素
上设置海报
图像
时,此
图像
将在用户播放视频之前显示(默认行为)。但是,如果海报
图像
的
纵横
比
与设置它的<video>
元素
的
纵横
比
不同,则会在
图像
的任一侧(左右或顶部
和
底部)看到空白(或可能的黑色空间),并且
图像
居中(也是默认行为)。我想知道
浏览 1
提问于2013-03-20
得票数 25
回答已采纳
1
回答
宽高比未知的flexbox中的等高
图像
html
、
css
、
flexbox
、
responsive
、
responsive-images
我
在
一个水平的flex容器中有
图像
。它们都应该是
响应
性
的,具有相同的高度,同时保持它们的
纵横
比
,并且不被裁剪: ? 这可以通过以下CodePen实现:https://codepen.io/sarus/pen/PJGPmy 这种方法的主要问题是,您需要预先知道所有
图像
的
纵横
比
: img {.img2 {
浏览 13
提问于2020-04-01
得票数 0
2
回答
具有最大宽度
和
最大高度
和
保留比例的Div (仅CSS)
html
、
css
、
image
、
sass
、
aspect-ratio
好的,这是一个很有挑战
性
的!我真的很想知道,如果可能的话,是否可以用CSS来完成这一任务,只使用。现在是棘手的部分。,但,我无法找到一种方法,使容器div
在
最大宽度
和
最大高度调整
方面
与
浏览 11
提问于2017-08-29
得票数 0
回答已采纳
1
回答
垂直中心
响应
iframe
css
、
iframe
、
responsive-design
我正在使用技术使
iframe
(视频)
响应
。基本上,
iframe
绝对定位在一个100%宽度的包装器
元素
中。包装器
元素
具有基于视频的
纵横
比
的填充集: position: relative; /* video height / video width */
iframe
。
在
使用之前,我已经实现了这一点,但它只适用于inline-block
元素</e
浏览 3
提问于2014-02-08
得票数 6
回答已采纳
1
回答
Bootstrap 3
和
响应
式背景
图像
?
html
、
css
、
twitter-bootstrap
、
responsive-design
我正在尝试使用Bootstrap创建一个
响应
式站点,该站点具有多个全宽背景
图像
。 这个想法是让每个
图像
拉伸到浏览器窗口的宽度,然后相应地缩放高度以保持
纵横
比
。我已经把我现在得到的东西放到了JSFiddle上: #first800px; /*height: 800px;*
浏览 2
提问于2013-09-15
得票数 6
回答已采纳
2
回答
如何在调整大小时停止背景
图像
的收缩
html
、
css
所以我有一个带有背景
图像
的div,背景大小设置为cover。important;} }当div被放大时,背景
图像
会变宽,并且不会显示
图像
的太多内容。当宽度为400px,高度为340px时,
图像
内容完全显示。当d
浏览 0
提问于2019-02-25
得票数 1
1
回答
使
响应
iframe
的
纵横
比
与屏幕/窗口大小的比率相同
html
、
css
、
iframe
由于我试图嵌入的本地文件本质上只是文本,我希望它看起来就像父html保存文本(也就是
响应
性
大小
和
所有内容) --嵌入html的动机,而不仅仅是直接写入它,主要是因为站点所有者想要使文本条目不能从检查
和
复制文本中0; left: 0; height: 100%;} 然而,我怀疑,由于填充属性的
纵横
比
,当我的屏幕处于分屏视图或移动屏幕时,它看起来很棒,但是当我将屏幕调整为全屏时
浏览 1
提问于2020-05-24
得票数 0
3
回答
单个img
元素
保持强制
纵横
比
,而无需包装填充破解
html
、
css
寻找一种技术来控制标签的
纵横
比
。
在
写这篇文章的时候,
纵横
比
属性的支持还不够。 通常,我会将
元素
包装在一个容器中,并应用填充顶部来创建所需的效果。
图像
响应
的容器宽度,因此不能直接执行高度
和
宽度。 例如,让
图像
在容器内保持16:9的比例。
图像
的视觉比例并不重要。我将获得要调整的
图像
object-fit: cover 目前有没有一种技术可以只对img标签本身起作用?
浏览 40
提问于2020-09-01
得票数 0
2
回答
Bootstrap
响应
图像
纵横
比
twitter-bootstrap-3
我有一个带有
响应
栏的产品页面。管理用户可以上传最终用户可以订购的产品
图像
。我已经将其设置为使
图像
也具有
响应
性
,但由于产品
图像
的
纵横
比并不完全相同,我有一些项目
比
其他项目更高,这使得页面
在
列中留出空格。我希望
图像
保持
响应
性
并保持它们的
纵横
比
,但要使它们在所有容器中都具有相同的高度
和
响应
性
宽度。更
浏览 9
提问于2016-01-30
得票数 4
回答已采纳
1
回答
如何为使用
响应
图像
样式的
图像
设置高度
和
宽度?
8
、
media
、
performance
在
使用核心
图像
模块时,会自动设置
图像
的高度
和
宽度。但是,当我使用
响应
图像
模块
和
响应
图像
样式时,就不会设置高度或宽度。
在
图像
元素
上设置显式宽度
和
高度,以减少布局移位并改进CLS。了解更多 也有今年“粉碎”杂志上一篇关于设置高度
浏览 0
提问于2020-12-16
得票数 0
回答已采纳
点击加载更多
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
微前端究竟好在哪?
什么是宽高比和定义?您是否发现自己在想:什么是宽高比?
HTML复习之全部
多种方式在Vue中嵌入Grafana面板
常用的ControlNet以及如何在Stable Diffusion WebUI中使用
热门
标签
更多标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
活动推荐
运营活动
广告
关闭
领券