DIsplay: flex获取图像高度，但在添加文本时溢出
在前端开发中，我们可以使用flex布局来实现弹性的盒子布局。要获取图像的高度并在添加文本时防止溢出，可以采取以下步骤：
- 使用HTML的<img>标签插入图像，并将其包裹在一个容器中。
<div class="image-container">
<img src="image.jpg" alt="Image">
</div>- 在CSS中，为容器设置display:flex属性，以便使用flex布局。
.image-container {
display: flex;
}- 使用JavaScript或jQuery，在图像加载完成后获取其高度，并将其应用于容器。
// JavaScript
window.addEventListener('load', function() {
var image = document.querySelector('.image-container img');
var container = document.querySelector('.image-container');
container.style.height = image.offsetHeight + 'px';
});
// jQuery
$(window).on('load', function() {
var image = $('.image-container img');
var container = $('.image-container');
container.height(image.height());
});- 在添加文本时，可以使用CSS中的文本溢出处理属性来防止文本溢出容器。
.text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}通过将文本包裹在一个元素中，并为该元素添加.text类，可以限制文本在容器内显示，并在溢出时以省略号显示。
以上是一种解决方案，可以根据具体需求进行调整。腾讯云提供了丰富的云服务，其中与前端开发相关的产品包括云服务器、云存储、人工智能服务等。具体产品介绍和使用方法，请参考腾讯云官方文档：https://cloud.tencent.com/product
相关·内容
1回答
我想创建一个布局与一些文本(或可能的其他东西)下的图像和文本和图像的组合具有固定的高度。下面的代码做到了这一点，但在缩小图像(保持在600像素)之后，flexbox容器不会更新其宽度。如何使容器仅与图像一样宽？ .container {
background-color: green;
display: inline-flex;
flex-direction: column;
align-items: center;
height: 300px;
} <div class='container'>
<img src='h
浏览 8提问于2020-03-20得票数 0
我的display: flex容器获取图像的高度，但是当我添加文本时，它会溢出图像。基本上，检查器获取图像的高度，但忘记了添加的文本。 * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.book-right-side {
display: flex;
gap: 1rem;
width: 100%;
}
.attraction-card {
width: 100%;
/* height: 100%; */
}
.book-right-side img {
border-radius: 12p
浏览 35提问于2021-10-22得票数 0
1回答
不确定是否可能，但我还是想问：
我正在使用flex创建一个粘性页脚。有引导-容器的页眉，内容和页脚。我的内容行由三列组成:导航、图像和文本。
我希望我的图像填充它的列(尊重比率，所以隐藏溢出)，但不超过文本。在下面的例子中，我得到了左边的情况(因为图像使用100%的高度)，尽管我想要右边的。我如何创建这个“空”空间？
<body>
<div id="header" class="container-fluid"></div>
<div class="wrapper">
浏览 3提问于2022-03-30得票数 1
我在获取符合div大小的图像时遇到了问题。我使用的是Bootstrap 4.1.3。
我正在尝试创建一个具有两个并排列的行，其中一列是文本，另一列是图像。我希望将行保持在1366x768分辨率的“折叠上方”，因此我将行限制为500px高。问题是我的图像是344 × 690，不会缩小以适合行。它只是上下溢出。
代码如下：
<div class="special-background">
<div class="container-fluid">
<div class="row py-4 bg-p1"
浏览 1提问于2019-01-23得票数 0
我最近一直在学习CSS flex，并尝试了一些简单的任务。其中一项任务是制作一个时间线，交替的元素位于中线或中线以下。
我希望能够设置初始宽度和固定高度，以便当内容超过div的高度并溢出时，宽度将扩展以容纳内容，希望不会出现溢出。
<div class="content">
<div class="box">
<div class="above">Content of the div</div>
<div class="below"></div
浏览 2提问于2018-12-11得票数 3
回答已采纳
1回答
我将一个包装容器设置为display:grid，它包含两列。一列包含响应图像，另一列包含文本。image列被设置为display:flex，这样图像将填充列n的完整高度，该高度由它旁边的网格项确定。
这在Firefox中工作得很好：
但在Chrome中，图像是全高显示的，而不是响应式的：
如果我将显示更改为-webkit-box，Chrome将按预期运行...
使用display：...but，它不应该像预期的那样工作吗？
链接：
我尝试了图像上各种宽度、最小宽度、高度、最小高度的组合，但似乎都不起作用。我知道我可以使用背景图像来处理这个问题，但我真的很想使用实际
浏览 24提问于2019-05-16得票数 0
回答已采纳
1回答
我试图防止柔箱子程序溢出它的容器，但是使用溢出:在子div上使用auto似乎不起作用。
我的基本设置是:我有一个包含2个div、A和B的柔性盒容器。A div有2个内部div、A1和A2，而basic只有一个内部div B1。我试图使A1和B1保持静态，并在A2上显示一个滚动条，当它溢出时。
html：
<div class="wrap">
<div class="A">
<div class="A1">A1</div>
<div class="A2">
浏览 3提问于2021-06-29得票数 2
回答已采纳
我想使用flexbox容器来显示一行图像。为了与屏幕上的其他元素配合得很好，容器的高度必须恰好为30vh。
里面的图像应该尽可能地放大，同时保持它们的纵横比，而不是使行溢出。
问题在于包装。在非常宽的屏幕上，图像应该都在一行中。但在大屏幕上，行应该会自动换行。这是我做不到的事情。flexbox中的元素可以收缩以适合，也可以环绕。但是我不能让包装和缩放同时进行。
有没有可能用flexbox做到这一点？这是我到目前为止的方法。我正在使用scss：
.App {
display: flex;
flex-direction: column;
justify-content: center;
浏览 2提问于2021-03-12得票数 1
我正在尝试创建一个标题，它可以在标题的右侧或左侧有一个按钮(图像)或文本标签：
<div id="header">
<div id="headerContent">
<div id="btnLeft"><img src="myimage.png" height="30"></div>
<div id="title" class="button">HeaderTitle<
浏览 0提问于2014-07-16得票数 1
3回答
我想将一个元素对齐到前一个元素的垂直中心。
在上面的例子中，我想将文本的顶部与旁边图像的垂直中心对齐。
因此，文本的高度是可变的，顶部的边缘应该只指向图像的垂直中心。
问题是，图像没有固定的高度，否则我只会使用边距或填充。所以我的想法是通过JavaScript计算图像的高度，除以2，然后把它作为文本的边距。
我试过用Flexbox，但在那里我必须给文本一个固定的高度：
.container {
display: flex;
flex-flow: row wrap;
max-width: 800px;
width: 800px;
margin: 0 a
浏览 6提问于2022-03-23得票数 -1
1回答
我的目标是有两个垂直中心内容列。一个只是一个动态的图像-需要被限制在它的div -一个只是文本。也不允许溢出。
我的代码在Chrome中运行没有问题，但是Firefox设置的图像大小太高了，我一点也不知道它为什么会这样做。
希望有人能帮我解决这个问题。已经在这个问题上浪费了几个小时。
谢谢你们！
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.Grid {
display: -webkit-box
浏览 4提问于2017-05-02得票数 1
回答已采纳
3回答
我正试图在移动屏幕上构建一个基本的信使视图。所以顶部有一个标题，中间有一个可滚动的消息列表，底部有一个带有textarea和按钮的栏来发送新消息。
我正在使用一个自动大小插件使textarea在用户输入消息时展开。问题是，当它改变了“高度”属性时，它将开始溢出它所在的容器的高度，而不是扩展到占用更多空间的容器。
下面是一个工作示例：
#container {
width: 412px;
height: 660px;
border: solid 2px black;
display: flex;
flex-direction: column;
}
#contai
浏览 0提问于2018-07-02得票数 2
回答已采纳
我想创建一个包含滚动面板的flexbox布局，但在每个列中都有一个始终可见的固定工具栏。
这就是我目前所拥有的：
.scroll-panel {
display: flex;
border: 2px dashed rgba(114, 186, 94, 0.35);
overflow: scroll;
flex-wrap: nowrap;
height: 100%;
-webkit-overflow-scrolling: touch;
}
.item {
margin
浏览 2提问于2019-07-30得票数 0
所以我有这个内容，但我希望页脚被下推而不是溢出，但我不希望它被隐藏，所以溢出隐藏不是一个选项，而是在页脚后面。有人能帮上忙吗?如果你有任何有用的意见来修改我的代码，让它更容易扩展，我也会非常赞成的。
文本本身没有任何CSS，我需要在文本上添加一些东西吗？
所以孩子是：
<child container>
<img>
<text>
<child container>
parent:
display: flex;
flex-direction: column;
min-height: 90vh;
margin-to
浏览 5提问于2020-02-05得票数 0
回答已采纳
我有一个问题，我一直试图解决很长时间。
我有一个响应网站，在那里我需要对齐横幅图像和文本旁边。横幅图像的最大宽度为1170 by，但是任何大小的图像都可以上传，所以我们必须通过CSS强制实现最大宽度。
应该像这样。文本应垂直居中，并应填补可用的空间留下的图像。
当我有一个太大的图像时，问题就出现了。在较小的屏幕尺寸中，我不能强迫图像根据可用的屏幕大小缩小它的大小，因此它只会溢出到屏幕之外。
它必须工作到大约700 to的浏览器宽度。在那之后，我们有一个断点，强制文本到一个新的行，所以我们没有这个问题了。
因此，重点是:图像的宽度未知，文本的数量未知(最多170个字符)。站点是响应的，最大
浏览 4提问于2015-10-22得票数 1
3回答
我很难解释我的问题，看看
body { width: 200px }
.a {
border: solid 1px black;
display: flex;
}
.b {
flex: 1;
}
<div class=a>
<div class=b>
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
<button>
click
</button>
</div>
我需
浏览 0提问于2018-01-22得票数 1
回答已采纳
我需要在div的左边有一个图像，并且有这样的图像：
与div的高度相同(div本身具有非固定的、与内容相关的高度)；Be完全符合其纵横比。
Flexbox看起来很适合这项工作，但是当将图像设置为100%的高度时，它的尺寸保持了自然宽度，并且内容溢出在div下。请参阅下面的片段：
.container {
display: inline-flex;
background-color: green;
}
.image {
flex: 0 0 auto;
background-color: purple;
}
.image img {
display: block;
浏览 2提问于2019-10-12得票数 1
回答已采纳
我有下面的缩略图网格(指向其他页面的链接)，我正在使用flexbox显示它们。
正如你在左边看到的，由于其中一个图像没有相同的纵横比，所以它不适合正确。我希望它填满整个可用的空间(本质上是缩放，这样它就可以填充它并“裁剪”溢出空间)。
容器css是这样的
display: flex;
flex-direction: row;
flex-wrap: wrap;
并且每个元素都有
flex-basis: 20%;
我可以添加什么css来获得我想要的行为？
如果相关，我实际上是在React中这样做的，在React中元素是动态加载的，css实际上是一个CSSProperties对象，但在客户
浏览 3提问于2021-07-11得票数 0
我在控制台上查看我正在工作的一个网站时，注意到我的横幅看起来很不对劲。
<div class="blog-post-featured-banner">
<img width="1600" height="900" src="#">
</div>
.blog-post-featured-banner {
height: 50vh;
overflow: hidden;
display: -webkit-flex;
display: -ms-flexb
浏览 3提问于2016-06-11得票数 1
我对flex的理解是：
<div class="flex-container">
<img src="image-1">
<img src="image-2">
...
<img src ="image-n">
</div>
<style>
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-contai
浏览 2提问于2021-10-21得票数 2
此代码片段是更复杂的移动布局的一部分。我唯一不能编辑的就是section的高度和溢出。
结构很简单:2个div，第一个包含图像，第二个包含文本内容。我试图让文本内容(红色边框内)始终可见，而不是从页面上裁剪出来，无论设备分辨率或设备方向(横向/纵向)如何。目前是裁剪出的页面上的横向或非常低的分辨率。当文本内容没有足够的空间时，div.logo必须减小高度。
<style>
* {
margin: 0
}
section {
display: flex;
flex-flow: column;
height: 100vh;
浏览 0提问于2017-11-21得票数 0
我正在尝试重新创建类似附加屏幕截图的东西。请注意，带有“另一文本”的块与左列对齐。每个灰色方框将是一个图像。还要考虑到文本可以是多行的。
这就是我目前所拥有的：
问题是，当第一列的行数比第二列的行数多时，框的底部将对齐，而不是图像的底部。
如何对齐它们？
.container {
width: 100%;
}
img {
display: block;
margin: 0;
max-width: 100%
}
.row {
display: flex;
align-items: strech;
}
.row>.col {
flex-grow: 1;
浏览 0提问于2019-04-15得票数 1
1回答
我试图使图像以div的全部高度作为文本，并保持其与宽度成正比，因为溢出是隐藏的，图像是居中的，我使用了display，我不想使用css中的背景图像，因为我有多个图像和文章。有人能帮忙吗？
div {
border: 1px dotted red;
display: block;
}
.article {
display: -webkit-flex;
display: flex;
flex-direction: row;
-webkit-flex-direction: row;
width: 100%;
overflow: auto;
padding:
浏览 5提问于2017-10-25得票数 0
回答已采纳
1回答
目前，当我使用Bootstrap卡时，当我降低浏览器的高度时，文本会像这样溢出
我怎样才能阻止它溢出
代码
<div class="col-lg-6">
<div class="card card-inverse card-primary" style="height: 30vh">
<div class="card-block" style="text-align: center;
display: flex;
justify-content: cent
浏览 2提问于2018-02-09得票数 1
回答已采纳
1回答
滑块中的图像和文本排列
、、、、
我正在为一个网站做一个滑块，我希望图片在左边，相应的文本在右边。我已经做到了，但不是很完美。图像后面的div已经扩展到图像下面，文本按照div而不是图像进行居中。因此，文本&按钮出现在图像的底部边缘附近。
我纯粹是通过ReactJS对网站进行编码，这是我的代码-
CSS：
const Container = styled.div`
width: 100%;
height: 100vh;
display: flex;
position: relative;
`;
const Arrow = styled.div`
width: 50px;
height: 5
浏览 3提问于2022-08-03得票数 0
回答已采纳
我目前正在为我的网站设计移动视图。站点上的图像在浏览器响应视图中是正确的，但是当我在移动上查看站点时，图像是不正确的。
我希望这张图片看起来像这样：
然而，在移动平台上看起来是这样的：
容器隐藏溢出-y和图像设置为宽度:100%，高度:适合内容；
<div id="aboutIntro" class="flex-col">
<div id="imageContainer">
<img src="../../images/ass
浏览 7提问于2022-05-27得票数 0
因此，当我试图得到图像的焦点时，如果我设置一个高度以imgdiv来获取这个值，就会得到错误的value.Instead。
反应：
constructor(props) {
super(props);
this.imgref = React.createRef();
}
componentDidMount(){
console.log(this.centerref.current.clientHeight);
}
render(){
return (
<div c
浏览 1提问于2020-07-24得票数 2
回答已采纳
我用flex创建了一个图片库。图像是列，在这些列中，每个图像的宽度都会被调整，以便图库符合flex容器的宽度。当用户在图片库中的图像上盘旋时，图像会增长并显示其完整大小。
图像被设置为对象适配:盖子和对象位置:中心顶部，因为这样可以防止图像缩放以适应柔性容器的高度，并且图像的顶部会在悬停时显示。
但是，如果图像有垂直溢出，我希望用户能够在图像展开后滚动图像的高度。
以前有没有人遇到过这种情况，你有没有建议我怎样才能达到这个目标？
我的HTML和CSS如下：
创建图像库
<section class="portfolio_gallery">
浏览 4提问于2021-07-11得票数 1
回答已采纳
1回答
我有一个树柱挠曲箱粘性页脚与背景颜色。当网站的内容溢出窗口时，这个页脚“松开”了它的背景色(所以当它不得不“向下移动”时)。这个问题发生在chrome和opera上，而不是Firefox。
下面是一些重现问题的代码：
按下按钮按下扩展键。
document.getElementById('button').onclick = function() {
var x = document.getElementById('filling');
if (x.style.display === 'none') {
x.style.dis
浏览 2提问于2017-05-24得票数 0
回答已采纳
2回答
我在Safari中使用flexbox时遇到了问题，我在这些页面上找不到适合我的解决方案。
在我的页面上，我使用了flexbox，并在一栏中放置了文本，在另一栏中放置了图片。它在Chrome和Internet explorer中查看效果很好，但在Safari中，图像会缩小，变得非常小或放错了地方。
CSS代码：
.flexbox {
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* safari */
-webkit-justify-content: center; /* saf
浏览 1提问于2015-10-05得票数 2
以下代码在FF中显示正确，但在Chrome div‘c’中执行时，其高度似乎不知道100%是什么意思。有人知道为什么吗？
#flex {
display: flex;
align-self: stretch;
flex-flow: column;
height: 300px;
width: 100%;
}
#a {
order: 1;
flex: 0 1 auto;
background-color: red;
}
#b {
order: 2;
flex: 1 1 auto;
background-color: blue;
}
#c {
fl
浏览 3提问于2016-05-10得票数 1
2回答
我有一个300px宽的容器，里面有两个弯曲的div。
第二个是100px宽，另一个应该会占用剩余的空间。
当我在第一个div中放置比剩余200px更宽的文本时，它会溢出，当文本溢出时，我可以使用overflow: hidden和text-overflow: ellipsis添加...。
当我在第一个div中放置一个h1标记并添加overflow和text-overflow时，应该会产生相同的效果。
它确实(在Chrome中)，但在IE和Firefox中，div变得更大，省略号不起作用。
当我删除额外的h1层并相应地更新css时，所描述的行为按预期工作。
或者看看我的
body{
d
浏览 2提问于2015-06-26得票数 9
回答已采纳
在这个中，子级溢出父级高度，但是为什么弹性父级高度不随子级增长？
我可以使用display:block来实现它，但我希望它是灵活的。
html,body{
height:100%;
}
.grand-parent{
height:100%;
overflow:auto;
display:flex;
}
.parent{
display:flex;
flex-direction:column;
min-height:100%;
flex-shrink:0;
width:100%;
}
.child{
height:1500px;
width:10
浏览 0提问于2018-08-14得票数 2
回答已采纳
我正在尝试构建一个响应式的盒子，其中盒子的纵横比保持不变，孩子们填充所有的垂直空间。
到目前为止，如果我给孩子一个固定的高度，父母不再保持它的纵横比，但我不能给孩子任何高度。似乎有一些关于堆栈溢出的答案，但在我的情况下无法让它们完全工作。下面是我在React中的代码：
ReactDOM.render(
<div
style={{
width: '100%',
display: 'flex',
justifyContent: 'center',
浏览 6提问于2021-05-10得票数 1
1回答
我有几张照片，它们都有很大的空白。我必须使它们比小屏幕中的视口宽度更大，以使它们具有客户端想要的大小，但这会产生一个空溢出。我似乎掩盖不了图像的溢出。以下是图像的代码及其容器：
HTML：
<div class="product">
<img alt="floor" id="img-product">
</div>
CSS：
.product {
display: flex;
justify-content: center;
align-items: center;
wi
浏览 0提问于2018-10-26得票数 0
回答已采纳
2回答
我试图在我的项目上设置一个无限滚动，但要使overflow-y: auto; css属性工作起来有困难。以下是我目前的布局：
我使用以下CSS/HTML代码创建它：
<div class="flex-items">
<div v-for="game in gamesData.games" class="card-spacing">
<!-- Contents -->
</div>
</div>
.flex-items {
flex:
浏览 5提问于2020-11-14得票数 0
回答已采纳
3回答
防止网架在柔性箱内溢出
、、、
我不知道为什么这些图像占用了这么多的空间并导致溢出。如果将img替换为文本，它看起来很好。
for (let i = 0; i < 15; i++)
{
$("#grid").append(`
<div class="item">
<img src="http://via.placeholder.com/150x350" />
</div>
`);
}
.flex {
border: 1px solid black;
display: flex;
f
浏览 6提问于2017-11-12得票数 2
回答已采纳
在Chrome中，另一个flex容器中的Flexbox列容器不能达到100%的高度，但在Firefox和Edge中一切正常。
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
.inside-container {
display: flex;
flex-direction: column;
height: 100%;
}
}
浏览 2提问于2016-03-25得票数 10
回答已采纳
我有一个问题，图像的百分比值内的弹性项目。我知道取决于父级大小的百分比值。在此问题中，图像的父级不显式设置任何大小。图像的大小是改变的，没有任何显式大小的高度在弯曲项目(图像的父)。弯曲件的宽度和高度仍与图像的原始大小相同.
.flex {
display: flex;
border: 5px solid red;
background-color: black;
}
.flex-item {
border: 5px solid yellow;
}
.flex-item-image {
border: 5px solid magenta;
height: 50%
浏览 5提问于2022-04-06得票数 1
我已经创建了一个基于flexbox结构的网站。我的目标是让div填充整个可视页面，但要避免让div低于浏览器窗口的下限。当文本溢出时，我的一个div应该会滚动，但在Firefox中，它会影响整个页面。
这是我的HTML：
<div class="header_bar">header</div>
<div class="page_grid">
<div class="pg_nav">nav</div>
<div class="pg_main">T
浏览 1提问于2015-11-12得票数 4
2回答
我一直试图在柔性盒中的垂直对齐图像下添加段落文本，但在将其呈现到下一行时遇到了麻烦。是否有可能使文本以图像为中心？
以下是我所拥有的：
HTML：
<section class="landing">
<div class="left-half">
<article>
<img src="http://placehold.it/400x600" />
<div class="text">
<p>I need t
浏览 1提问于2016-06-01得票数 0
1回答
我有一个文本和一个图像。这些必须适应父母，我定义了一个高度，例如100px 文本必须填满它所需要的内容。它可以是一个简单的短语，也可以是一个很长的段落，因此我不能定义一个固定的高度。 有了剩余的空间，我想放置一个img，但当我放置它时，图像采用原始img的高度大小。你可以在这里看到我的代码片段： .parent{
height: 100px;
width: 100%;
padding: 10px;
display: flex;
flex-flow: column;
}
.parent img {
flex: 1 1 auto;
}
.parent .te
浏览 18提问于2019-10-02得票数 1
我有以下要求
左边的两个框应该总是50/50拆分右边的图像应该伸展以适应左侧的文本高度左边的文本不应该剪裁，框应该放大以适应文本
现在的问题是，顶部的文本溢出到下面的div中。
我添加了示例代码来显示这个问题
.section-8 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-
浏览 2提问于2021-01-20得票数 0
任务是将<img>与其上方和下面的文本块安装到具有指定高度的容器中。
文本块和图像的高度尚未确定。
经过几个小时的搜索和讨论，我的同事帮助我对包含图像的柔性盒孩子进行了height: 100%;攻击。
.container {
display: flex;
height: 300px;
flex-direction: column;
}
.container .cell-image {
display: flex;
height: 100%;
}
.container .cell-image img {
max-width: 100%;
max-h
浏览 3提问于2019-12-05得票数 1
回答已采纳
我需要编写一个由html、css、js、phonegap开发的混合安卓/iOS应用程序。我不应该使用我自己的媒体查询。所以我用的是bootstrap。我有一个标题中的图像，如屏幕快照所示(这是在纵向模式下)：
但是，当它被改变为景观模式时，图像就会从标题中出来，如下所示：
在不使用媒体查询的情况下，如何在景观模式下保持图像不变？
这是
CSS:
#headDiv {
display: flex;
flex-flow: column;
justify-content: center;
background-color: #FFA500;
height:
浏览 3提问于2015-08-17得票数 1
回答已采纳
2回答
我试图使角度ag-grid来获取网页的全部高度，所以如果我有一些组件，比如ag-grid的文本或标题，我想要使显示的网格获取页面的全部高度。
我看过关于堆栈溢出的问题：
然后我试着把这个应用于角ag-grid网格
下面是我应用的css，但它没有提供所需的结果：
body, html {
height: 100%;
margin:2px;
}
my-app .container {
display: flex;
flex-direction: column;
}
my-app .container .ag-grid-angular {
flex-basis: 100%
浏览 2提问于2018-05-14得票数 4
回答已采纳
我有一个flex容器，其中包含一些flex项。我希望项目在默认情况下扩展为包含其所有内容，而不会水平溢出flex容器。正如您从附加的图像中看到的，"Content 7“正在溢出。 flex-container当前的外观： ? HTML： <div class="flexContainer">
<div class="flexItem">Content 4</div>
<div class="flexItem">Content 5</div>
<div
浏览 25提问于2021-09-21得票数 0
2回答
嘿！感谢您的阅读！我有一个网页应用程序登录屏幕。我的重点是创建一个响应性的应用程序类登录页面。(无卷轴等)
发行说明：
的视口宽度为300 to，在463 to和较短的视口高度，所有项目都填充了整个屏幕，页面底部的内容开始被切断。
同样可以说是528 be和650 be高度。
(这告诉我，它正在缩放到一个特定的纵横比(电话肖像到相对正方形的纵横比)。在景观的纵横比中，图像变得大得可笑- ...expected，但不想要)
目标：，我只是想让图片在高度上缩小，并在改变视口高度时保持其纵横比。(支持弯曲生长/收缩提供的纵横比)，而不是溢出和改变这个比率。
注意:对于那些想要一个更简单的例子的人来说
浏览 9提问于2022-05-12得票数 2
回答已采纳
Flexbox很好。但有一个问题困扰着我。
柔性盒能处理任意高宽比的图像吗？
我想限制一个柔性盒的高度，不要因为图像太大而使内容溢出，但仍然要尽量最大化图像，同时保持高宽比。
这个是可能的吗？还是有更好的方法？
如果我太挑剔的话就纠正我。也许我们在设计网页时不需要考虑任意的高宽比？同时处理宽图像和长图像？
下面是一个例子：
html, body {
height: 100%;
}
body, p {
margin: 0;
}
main {
display: flex;
flex-direction: column;
position: absolu
浏览 4提问于2021-03-08得票数 0
回答已采纳
当窗口的宽度降到768px以下时，我希望水平相册图像和文本内容进行转换，以便图像显示在相册文本的下方，但在下面的lorem ipsum文本之上。我尝试了下面的CSS代码，但它不起作用。目前，当窗口降到678px以下时，图像仍然位于右侧。 https://jsfiddle.net/x1hkzrvw/3/ @media screen{
.image{
width:20%;
float: right;
border-radius:50%;
}
}
@media(max
浏览 15提问于2019-05-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
