Html CSS将SVG定位在div的底部

我有一个div，应该有一个徽标和一个插图。移动版应占屏幕的100%，图像部分应占屏幕的60%。正如你在下图中看到的那样，我被这一点困住了。 我希望有更好的CSS技能的人可以帮助我

代码：

JSX代码：

 <div className='image-content'>
              <Image className='logo' src={logo} />
              <Image className='cover-image' src={coverImages[pageIndex]} />
            </div>

它是用React和语义UI编写的

呈现的HTML：

   <div class="image-content">
    <img
      src="/static/media/intro-logo.862f85da.svg"
      class="ui image logo"
    /><img
      src="/static/media/welcome-clean-crop.a0857347.svg"
      class="ui image cover-image"
    />
  </div>

边框仅为理解目的而设置

---

谢谢

给你的封面图片img宽度：100%适用于手机壳

添加了仅针对移动案例的css：

下面是演示：

* { 箱体尺寸：boder箱体； } .图像内容{ 高度：500px； 背景色：e8f6fa； 边框：1px纯红； } .标志{ 可见性：隐藏； 位置：绝对位置； 保证金：30像素自动； 左：0； 右：0； 文本对齐：居中； z指数：2； } .封面图片{ 边框：1px纯蓝色； 位置：绝对位置； } @介质最大宽度：767px{ .封面图片{ 宽度：100% } }

---

您可以在图像内容上使用此选项：

display: flex;
align-items: flex-end

---

使用flexbox将项目对齐到末尾。

请编辑您的答案，并解释其工作原理以及如何解决问题？尝试使用引导检测页面宽度

@media (max-width:767px){
      .cover-image{
      width:100%}
      }

display: flex;
align-items: flex-end