腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
(9169)
视频
沙龙
2
回答
在
具有
特定
高度
的
flexbox
容器
内
的
图像
上
使用
CSS
“
object-fit
:
container
”
属性
时
的
神秘
行为
css
、
flexbox
、
object-fit
我有一个
flexbox
容器
,我试图在其中并排显示两个带有阴影
的
图像
。我想让它们占据相等
的
水平空间,即使
图像
的
大小不同。我
使用
了一个样式为"display: flex“
的
容器
,并对
图像
使用
了"
object-fit
:
container
”以使其缩放。如果我不给
容器
一个
特定
的
<e
浏览 26
提问于2021-04-17
得票数 0
回答已采纳
2
回答
在
Flexbox
中对齐和缩放
图像
html
、
css
、
image
、
flexbox
如果<img> (未知尺寸
的
)
在
一个
容器
内设置为display:
flexbox
,是否有可能满足以下条件:
浏览 1
提问于2015-07-16
得票数 7
回答已采纳
2
回答
CSS
:如何在响应50%宽
的
上下文中显示
图像
对象-适合:覆盖?
css
、
flexbox
、
cover
、
object-fit
到目前为止我所拥有的是: 基本
上
,它看起来“好像”它工作正确,当用
图像
改变浏览器窗口
时
,没有采用宽度
浏览 5
提问于2017-10-06
得票数 1
回答已采纳
5
回答
对象适配不会影响
图像
html
、
css
我一直
在
尝试用 里面放了几张图片 元素,但这似乎一点也不影响它们。
属性
的
所需值。
属性
将为 ,但到目前为止,其他值似乎都不起作用。当我改变它
的
价值
时
,它们不会缩小,不会增长,不会...什么都没有。 如果您看到CodePen,就会发现两行之间有空格,并且
图像
占用
的
空间/
高度
并不完全相同(与预期
的
情况一样 )。overflow: hidden;} main
浏览 90
提问于2015-12-13
得票数 79
回答已采纳
2
回答
使用
可动画
属性
模拟对象匹配
html
、
css
我试图制作一个灯箱,它需要一个从缩略图到全屏
图像
的
动画。
在
缩略图状态下,
图像
将保存在
具有
固定高宽比(例如,3:2)
的
容器
中。画廊
上
的
每一幅
图像
都必须符合这个分配
的
空间,覆盖其整个表面(通常是
object-fit
: cover)。
在
全屏状态下,
容器
将扩展到大约100 to :100 to,并且
图像
可以展开(甚至收缩,一些异常高<
浏览 2
提问于2020-10-04
得票数 2
2
回答
为什么我
的
图像
高度
缩放不正确?
javascript
、
css
、
image-resizing
所以我正在做一个图片库,其中
图像
显示
在
200x200px列表项中。display: block; height: 200px; overflow: hidden;为了使肖像/景观
图像
使用
整个
高度
/宽度,我
使用
javascript来决定是将
高度
还是宽度设置为100%。({'height' :'100%', 'w
浏览 4
提问于2015-12-06
得票数 2
回答已采纳
1
回答
相同
高度
的
不同
图像
css
、
tailwind-css
我在网格中显示了一些
图像
。然而,它们是不同
的
高度
。 我怎样才能使它们
的
大小相同呢? 代码到目前为止。 附注:我
使用
React,因此
使用
className。它
的
工作原理与class完全相同。
浏览 13
提问于2020-08-23
得票数 0
1
回答
为什么
使用
flex包装会破坏包含大型
图像
的
项
的
高度
?
html
、
css
、
flexbox
我
使用
一个启用了
Flexbox
和2个子div
的
容器
设置了一个简单
的
页面。子div被设置为一个600 to和400 to宽度
使用
css
灵活速记。一个大
的
图像
已经添加到子
图像
中,并调整到100%大小。
在
容器
上
启用flex-wrap: wrap之前,这是非
浏览 3
提问于2021-03-24
得票数 2
回答已采纳
2
回答
flexbox
容器
中
的
CSS
:元素不会出现,除非为它或
容器
指定一个
特定
的
高度
css
、
flexbox
我试图
在
flexbox
容器
div中创建一条垂直线,我发现除非我给这条线或
容器
一个
特定
的
高度
(比如100px而不是百分比),否则这条线不会显示出来。
使用
devtools检查表明,即使
容器
的
高度
不为零,该线
的
高度
也为0。我猜也许渲染引擎
在
渲染线条
时
不知何故不知道
容器
的
高度
?我想要
浏览 35
提问于2021-04-19
得票数 0
4
回答
如何将不同大小
的
图像
转换成100x100px
的
div,而不会弄乱宽高比。(隐藏溢出)
html
、
css
这里有一个JSFiddle来说明我
的
意思:。代码在这里:<div class="
container
"></div>.
container
{ width: 100px; height: 100px; overflow: hidden; border: black solid 1px; ma
浏览 1
提问于2014-10-22
得票数 2
5
回答
为什么适配对象
在
柔性盒中不起作用?
html
、
css
、
flexbox
我有几个列,我
使用
flex给出了相同
的
宽度。每个标签都包含img标记,我希望这些
图像
显示
object-fit
: cover大小。 display: flex; width: 100%;.test { margin-right: 1rem; height: 400px;img {} &
浏览 4
提问于2016-05-10
得票数 31
回答已采纳
2
回答
图像
扩展了flex父元素
的
高度
,但在chrome和safari中表现出奇怪
的
黑客
行为
。
html
、
css
、
flexbox
容器
本身
具有
flex: 1,因为它也属于带有flex-direction: column
的
flex parent,并且
在
引入镜像情况之前,child
的
行为
与预期
的
一样(采用父对象
的
100%
高度
)。
在
将
图像
添加到child
时
,该
图像
扩展child以适应其
高度
,有效地child推送parent。 在这种情况下,
在
图像</em
浏览 13
提问于2020-02-25
得票数 1
回答已采纳
2
回答
为什么对象拟合不会影响
图像
?
html
、
css
、
image
我
在
一个div中有两个
图像
。我想要两个
图像
来填充整个div,这应该是整个网页
的
高度
和宽度。唯一
的
问题是,当我
使用
object-fit
属性
时
,
图像
根本不包含在我
的
容器
中。几乎就像我根本没有包含这个
属性
一样。有什么办法能帮到我吗?谢谢。/*
CSS
Documen
浏览 0
提问于2018-11-09
得票数 0
1
回答
如何
使用
对象-适合与弹性增长/弹性收缩?
css
、
flexbox
、
scale
、
object-fit
我有两个垂直堆叠
的
容器
(
在
一个固定大小
的
父
容器
中): 当
图像
具有
纵向比例(
高度
>宽度)
时
,它仍然<e
浏览 7
提问于2022-05-27
得票数 3
3
回答
"
object-fit
: is“和"max-width: 100%;max-height:100%”有什么区别?
html
、
css
当我
使用
"
object-fit
: contain“缩放
图像
时
,我意识到它在Internet Explorer / Edge中不起作用。也许这是一个愚蠢
的
问题,但我有点困惑。
浏览 0
提问于2016-05-23
得票数 0
2
回答
放大
图像
,直到
高度
或宽度均为100%
html
、
css
我有一个
图像
元素,它可以包含
图像
的
任何纵横比(例如水平和垂直)。我想用它填充页面,直到它
的
高度
或宽度达到页面的100%。 我尝试检查
图像
的
高度
和宽度,并将最小宽度/
高度
设置为100%。这对于垂直
图像
非常有效,但对于水平
图像
,有时
在
宽度之前达到100%
的
高度
(特别是
在
4:3宽高比
的
图像
浏览 15
提问于2021-09-10
得票数 0
回答已采纳
1
回答
Flexbox
高度
和背景
图像
高度
html
、
css
、
flexbox
、
background-image
我是html和
CSS
的
初学者,我会尝试用可点击
的
点来制作地图,但我不明白。我收到了
使用
柔性盒和创建一个以地图作为背景
图像
的
容器
的
提示,并创建了单独
的
容器
,这些
容器
可以为可点击
的
点保存
图像
按钮。首先,我尝试让背景
图像
和点/(框)同样调整大小,然后尝试
在
points/( by )
上
设置位置,但我
浏览 4
提问于2021-12-19
得票数 1
回答已采纳
4
回答
CSS
移除
图像
周围
的
空白
html
、
css
、
image
、
layout
我直接在我
的
网站上
使用
来自亚马逊
的
图片,所以我不能在
图像
编辑程序中手动修剪它。
图像
周围是大量
的
空白,这是令人讨厌
的
,因为在这个
图像
下,有文字。这使得
图像
与其下
的
文本之间
的
差距非常大(因为
图像
底部有空白处)。 而且,每个
图像
都包含不同数量
的
空白,所以我不能仅仅设置一个固定
的
负margin-bottom。我知道mix-blend-m
浏览 6
提问于2020-07-20
得票数 0
2
回答
制作响应式网站
时
遇到问题(
在
不同
的
设备/分辨率
上
无法正确显示)
html
、
css
我最近发现,当我
在
显示我
的
网站
时
减小google窗口
的
大小会导致其中
的
内容不能正确显示(没有响应)。这特别影响页眉和页脚当我
在
笔记本电脑
上
测试我
的
网站
时
,分辨率比我
的
电脑显示器小得多,为了让网站看起来整洁,我也是这样做
的
,缩小到75%左右。我看过关于如何做到这一点
的
教程,它主要是关于
使用
这个元标签
的
: <meta name="vi
浏览 31
提问于2020-10-14
得票数 0
回答已采纳
2
回答
更改视频
的
高度
并保持宽度不变
html
、
twitter-bootstrap
、
css
我有一个视频,我想改变
高度
和保持相同
的
宽度,例如宽度
在
全屏
上
,我认为是100%和
高度
只有200px相同
的
这个网站www.paypal.com
的
问题是,当我改变
高度
宽度也会自动改变,视频到中心(水平拉伸)embed-responsive-item"> </video> 视频{宽100%,
浏览 3
提问于2015-12-09
得票数 1
点击加载更多
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
前端布局神器 Grid,看这一篇就够了
前端自适应布局你需要知道的所有事
基于 Flexbox和CSS Grid 的高效布局
Web自适应布局你需要知道的所有事儿
给萌新的 Flexbox 简易入门教程
热门
标签
更多标签
活动推荐
运营活动
广告
关闭
领券