Javascript 使div内的图像占用的空间始终相同

一些文本1

一些文本2

我有固定高度的父div。父div始终有2个子容器：

• 1个clild-带图像的div
• 2个具有一些数据的子div

容器内的图像大小可能不同。有时，图像越大，它在

#child1

和我的

#child2

中占用的空间就越大，文本只显示一半。我可以看到“一些文本1”段落，但看不到“一些文本2”

如何使我在

#child1

中的图像始终占据

#parent

中相同的空间百分比？（可能，通过放大它）

给出

#child

和

#child2

宽度，然后使

img

元素的宽度为父元素的100%

.parent{
高度：400px；
宽度：500px；
}
.孩子{
宽度：49%；
显示：内联块；
}
.儿童img{
宽度：100%；
}

一些文本1

一些文本2

给出

#child

和

#child2

宽度，然后使

img

元素的宽度为父元素的100%

.parent{
高度：400px；
宽度：500px；
}
.孩子{
宽度：49%；
显示：内联块；
}
.儿童img{
宽度：100%；
}

一些文本1

一些文本2

Flexbox在这方面非常棒。我在CSS中加入了注释，解释了每一行的作用

*{
框大小：边框框；
/*计算宽度时包括边框和填充*/
}
.家长{
显示器：flex；
/*flexbox布局*/
背景：番木瓜；
}
.孩子{
弹性：0.50%；
/*这是与flex容器相关的子元素的布局。父元素，flex grow的缩写：0；flex shrink:0；flex basis:50%；将flex basis视为项目开始的宽度*/
边框：1px实心道奇蓝；
填充：20px；
/*内部边缘周围有一些空间*/
}
#孩子1{
显示器：flex；
/*同时给出child1包装器flexbox布局*/
对齐项目：居中；
/*垂直线形*/
证明内容：中心；
/*平面线形*/
}
#儿童1 img{
最大宽度：100%；
高度：自动；
}

一些文本1

一些文本2

Flexbox在这方面非常棒。我在CSS中加入了注释，解释了每一行的作用

*{
框大小：边框框；
/*计算宽度时包括边框和填充*/
}
.家长{
显示器：flex；
/*flexbox布局*/
背景：番木瓜；
}
.孩子{
弹性：0.50%；
/*这是与flex容器相关的子元素的布局。父元素，flex grow的缩写：0；flex shrink:0；flex basis:50%；将flex basis视为项目开始的宽度*/
边框：1px实心道奇蓝；
填充：20px；
/*内部边缘周围有一些空间*/
}
#孩子1{
显示器：flex；
/*同时给出child1包装器flexbox布局*/
对齐项目：居中；
/*垂直线形*/
证明内容：中心；
/*平面线形*/
}
#儿童1 img{
最大宽度：100%；
高度：自动；
}

一些文本1

一些文本2

固定孩子的身高和使用背景图像会有所帮助<代码>溢出将确保子对象的高度不超过250px

<div id=“parent”>
    <div id = "child1">
       <img src="123"/> 
   </div>
   <div id = "child2"> 
      <p> Some text1 </p>
      <p> Some text2 </p>
   </div>
</div>

HTML

正文

固定孩子的身高和使用背景图像会有所帮助<代码>溢出将确保子对象的高度不超过250px

<div id=“parent”>
    <div id = "child1">
       <img src="123"/> 
   </div>
   <div id = "child2"> 
      <p> Some text1 </p>
      <p> Some text2 </p>
   </div>
</div>

HTML

正文

<div id="parent">
    <div id="child1" style="background-image:url('path');"></div>
    <div id="child2">Text</div>
</div>