如何使用html和css缩放（外部）元素与（内部）img元素相同？

Question

我的目标是使用css和html将<h1>与<img>的底部对齐。缩放窗口时，图像的大小将增加（垂直和水平），我希望文本在图像的顶部对齐，在底行之后。目前我使用宽度和高度的一些百分比来对齐文本，但您永远不知道文本是否实际上在底部对齐。

我还提供了一个具有所需结果的示例。蓝色文本与底部对齐的红色框是我想要完成的，我使用了一个可变高度和宽度的元素。

因此，我认为如果可以缩放与图像本身成比例的<img>容器，我可以获得相同的结果。

一些额外信息

• 我不想要使用css grid
• 我不知道我的应用程序中图像的比例。

我有以下css和html

container{
  position:relative;
  height:100%;
}
img{
  position: absolute;
  width:100%;
  height:auto;
  z-index:1;
}
h1{
  position:absolute;
  top:30vw;
  left:50vw;
  color:red;
  z-index:10;
}

.variable-container{
  position:relative;
  text-align:center;
  height:70vw;
  width:50vw;
  background-color:#de2d3d;
}
h2{
  width:100%;
  position:absolute;
  bottom:10px;
  color:blue;
}

<div class="container">
   <h1>Title</h1>
   <img src="https://placebear.com/g/200/100.jpg">
</div>


<!-- This is what I am trying to accomplish -->
<div class="variable-container">
  <h2> 
  Aligned bottom of box
  </h2>
</div>

Answer 1

因此，这里的主要问题是嵌套的img元素已定位absolute，将其取出正常的文档流。因此，外部元素（包含父元素）无法根据内部元素（嵌套元素）进行缩放，因为它不再相对于文档流。

变更摘要：

嵌套img元素的定位：

• 嵌套的img元素position属性已从absolute更改 到relative，这个属性可能会被完全删除（如 在这个范围内似乎没有必要）

嵌套h1元素的定位：

• 嵌套h1元素的定位也已经过重新设计 水平居中一个绝对定位的元素 始终只需使用单位声明left和right属性即可 0的值，由于h1是块元素，因此只需声明 text-align: center以文字为中心。

• 要获得相对于包含元素的一致定位，请使用 bottom属性而不是top属性;自从 要求是让这个元素保持相对于 包含元素的底部。如果要求在哪里 对立（相对于含有的顶部定位） （），然后使用top属性将适用。

图片宽高比问题：

• 第一个示例演示了图像宽高比的一些问题， 所以还有一个background-image替代品可以称为 好。

代码段示范：

注意：为了演示，您可以手动调整包含元素的大小（右下角）。

.container{
  position:relative;
  height:100%;
}
img{
  position: relative; /* to scale outer el same as inner el, inner el can't be out of normal document flow */
  width:100%;
  height:auto;
  z-index:1;
}
h1{
  position:absolute;
  /* rather use `bottom` property if text needs to stay at bottom, and use an absolute unit value like `px` for most consistent positioning */
  bottom:30px; 
  /* simply center an absolutely positionied element with properties `left` & `right` with values of `0` */
  left:0;
  right: 0;
  text-align: center; /* then center text of block element */
  color:red;
  z-index:10;
  margin: auto; /* unset vendor margin property */
}

.bg-img {
    background-image: url(https://placebear.com/g/200/100.jpg);
    background-size: cover;
    height: 100%;
}

/* For the sake of demonstration */
.resize-demonstration {
  overflow: hidden;
  resize: auto;
  padding: 15px;
  border: 2px dashed #ccc;
}

<h2>Embedded Image</h2>
<div class="resize-demonstration">
  <div class="container">
     <h1>Title</h1>
     <img src="https://placebear.com/g/200/100.jpg">
  </div>
</div>

<h2>Background Image</h2>
<div class="resize-demonstration">
  <div class="container bg-img" style="height: 300px">
     <h1>Title</h1>
  </div>
</div>

JSFiddle Demonstration