腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
(9999+)
视频
沙龙
4
回答
如何
缩小
img
以
适应
其
flex
容器
?
、
在这个
容器
中,我
如何
将
img
/
img
- JSFiddle
缩小
到只有它最宽的同级div那么宽? .outer {
flex
-flow: column; display:
flex
; borderdiv class="outer"> <span>text<
浏览 31
提问于2018-02-16
得票数 0
回答已采纳
1
回答
图像最大宽度属性会导致意外行为。
、
图像正在
缩小
,尽管它们都是内联元素。设置图像的max-width: 100%;的原因是图像要
缩小
,否则需要适当的宽度。无字中断优先于图像宽度。当我设置图像的最大宽度属性时,浏览器是否认为我要它
缩小
图像
以
显式地
适应
其
容器
宽度设置?代码链接:.ola { width: 110px;} text-decoration: none; }a:first
浏览 0
提问于2019-10-18
得票数 2
回答已采纳
1
回答
IE :
IMG
原始高度影响父级高度
、
、
、
、
我有一个父的flexbox (它也是一个列flexbox的一部分): width:100%; display:block; height: auto;它在Chrome中的工作原理与预期一样,但在IE中,最初
img
的
浏览 1
提问于2015-10-26
得票数 6
1
回答
如何
使按钮占用所有可用的空间时,它的父有一个最小的高度?
、
"container"></div> display:
flex
; margin-bottom: 3em; text-align: center; border-style
浏览 2
提问于2020-06-17
得票数 0
回答已采纳
2
回答
为什么图像会自动放进带有弯曲方向列而不是行的
容器
中?
、
我有一个带有
flex
的
flex
-direction: column
容器
display:
flex
; border:mdn.github.io/css-examples/learn/images/balloons.jpg" alt="">
缩小
图像
以
适应</em
浏览 8
提问于2022-10-24
得票数 2
2
回答
使用Flexbox对齐项目内部或包装项目2乘2
、
、
下面是我的代码:.secondContainer {
flex
-wrap: wrap; display:
flex
;}
flex
-grow:0;} <section><div class="secondC
浏览 3
提问于2020-10-11
得票数 0
回答已采纳
1
回答
当使用
flex
(列)作为父级时,自动边距
缩小
子div
、
、
、
我试图使用margin 0 auto将父div内的一个div (在列模式下显示
flex
)中的一个div水平地居中。当我这样做时,内部div就会
缩小
到其内容的大小。
如何
解决这个问题?</div> CSS background-color: brown; display:
flex
;}
浏览 2
提问于2020-09-16
得票数 0
回答已采纳
1
回答
CSS max-高度不应用于图像标记
、
、
我有以下代码: height: auto; max-height: 50px;}<div class="goplots"></div> 问题是,只有在修改width值时才调整图像的大小。它不应用height或max-height。我什么都试过了,但没有成功。怎
浏览 2
提问于2014-10-16
得票数 1
回答已采纳
2
回答
我
如何
做一个柔性箱
容器
,伸展到适合包装的项目?
、
我想要一个
flex
-direction: column;柔性盒
容器
,它的宽度会增长
以
适应
包含的元素。 灰色div是柔性箱的
容器
,红色的div包含在里面,并被铺在有挠曲盒的柱子上。灰色div需要展开/
缩小
其
宽度,
以
完美地包含红色的子div。这个是可能的吗? display:
flex
;
flex</em
浏览 2
提问于2015-03-24
得票数 10
回答已采纳
9
回答
更改高度时保持图像纵横比
、
、
使用CSS
flex
box模型,
如何
强制图像保持
其
纵横比?请注意,为了填充
容器
的宽度,图像会拉伸或收缩。这很好,但我们是否也可以让它拉伸或
缩小
height
以
保持图像比例?HTML <
img
src="http://www.placebacon.net/400/300" alt="Bacn"
浏览 106
提问于2015-06-12
得票数 122
回答已采纳
12
回答
如何
缩放图像
以
覆盖整个父域?
、
、
、
这个<
img
>不像我期望的min-width:100%那样收缩包装单击<iframe>中的任意位置
以
切换
容器
形状 我的问题是:缩放一个<
img
>
以
保持高宽比,但覆盖父<div>的整个
浏览 11
提问于2015-07-02
得票数 31
回答已采纳
1
回答
如何
在高度和宽度约束下用
img
填充剩余空间
、
、
、
、
如何
在高度和宽度约束下用
img
填充剩余空间使用具有挠性方向的列设置页眉和页脚的高度(或者可以用挠曲基础完成)的挠性收缩:0对于页眉和页脚,这样它们就不会收缩挠缩:1在图像
容器
上,因此,如果需要,它会
缩小
图像对象的最大宽度和最大高度问题:图像
缩小
以
适应
宽度,但应该收缩更多,
以
适应
可用的垂直空间。class='header
浏览 1
提问于2021-07-01
得票数 0
回答已采纳
2
回答
压缩图像的Flexbox具有原始图像大小的宽度(而不是折叠到呈现的图像宽度)
、
、
、
具有图像的挠性
容器
缩小
以
适应
容器
的高度,在调整大小之前保持原始图像的宽度。因此,
容器
不会折叠到收缩图像的新宽度。 是关于轮胎图像的。292x440pxDiv.cont_1大小:292 of (应该/希望拥有;) 137 of) display:
flex
; he
浏览 5
提问于2022-03-02
得票数 1
1
回答
如何
让
img
标签适合没有对象匹配的css网格单元格中的缩放?
、
、
这是一个vue组件,它的父组件
以
2 x 4偶数布局呈现其中的8个组件。图像比它的网格
容器
大。我希望它
缩小
,
以
适应
容器
,同时保持
其
纵横比。然而,object-fit对
img
标签没有任何影响,图像呈现为全尺寸,严重扭曲了网格并打乱了我的布局。 当
img
标记被注释掉时,它的父div会格式化成正确的大小并填充它的网格
容器
。<template> <div class="camera-wrap
浏览 10
提问于2020-10-02
得票数 0
2
回答
CSS图像行等高,填充宽度并保留纵横比
、
我正在尝试获得3个不同纵横比的图像来显示在一行中,
以
填充
容器
的宽度。我希望他们的高度是相等的,但又是流动的。因此,图像保持
其
纵横比,但缩放
以
适应
容器
的宽度。这是我的尝试: Codepen .row.wrap
img
max-width: 100%height: 100% 它目前没有保留宽高比,但它们确实调整了
容器
的大小并填
浏览 42
提问于2021-09-10
得票数 0
1
回答
增长/收缩挠性项
以
适应
图像
、
我试过使用
flex
框,但是图像
flex
项不会根据图像大小调整
其
宽度:.wrap { position: absolute; right: 0; left: 0; background-color: blue;} height: 100%;
浏览 1
提问于2017-06-07
得票数 1
回答已采纳
5
回答
使图片元素中的图像适合
其
容器
、
我有以下代码:#container { width: 333px;} object-fit: cover;<div id="container"> <
img
src="http://placekitten.com/g/300/300" alt="kitten
浏览 14
提问于2017-12-19
得票数 9
回答已采纳
1
回答
父级图像,保留透视图,当大于X时
、
、
我想在一个
容器
中显示各种大小的图像。如果图像大于80%的视口高度,则应
缩小
其
大小
以
适应
容器
内的需要。<
img
src="http://dummyimage.com/200x200/000/fff/?text=small&quo
浏览 3
提问于2016-03-01
得票数 0
回答已采纳
1
回答
如何
在CSS网格中实际排列图像?
、
、
我有一个svg映像(content__
img
类),默认宽度为760.7,高度为687.08,在网格
容器
中有2列和2行‘1 is’,该图像位于第一个单元格中,由于图像大小大于第一行,图像放大了行的高度: -如果将图像包装在
容器
div中(使用类content__
img
-box),这也不起作用,尽管div占用100%单元格的宽度和高度,因此,如果我将图像的高度设置为100%,为什么图像不从div (content__
img
-box)获取100%?"content__
img
"
浏览 2
提问于2021-08-14
得票数 0
回答已采纳
2
回答
CSS父级知道堆叠的子级
、
、
、
这种方法的缺点是父元素不知道子元素的边界,因此不能使
容器
适应
其
子边界。
Flex
和Grid解决方案被接受以及位置绝对解决方案。div { background: #eee; /* DOES NOT FILL UP */ position: absolute;}
img
:last-chi
浏览 3
提问于2020-07-27
得票数 3
回答已采纳
点击加载更多
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
CSS3 Flexbox布局
【CSS基础】Flex弹性布局
前端入门5-CSS弹性布局flex
Flex 布局教程:语法篇
Flex-弹性布局原来如此简单!
热门
标签
更多标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
活动推荐
运营活动
广告
关闭
领券