html - 如何使一个元素跟随另一个元素的大小

Question

假设你有一张图片

<img class="testImage" src="test.png"/>

然后还有一个部分应该始终遵循图像的高度。 我知道下面的这些例子永远不会起作用，但只是为了提供一个想法，如果这样的事情可能吗？

height: .testImage;
height: calc(0 + .testImage);

我想这样做的原因是因为我正在 WordPress 中处理一些事情，我在其中放入了图像，然后旁边有一些内容。 https://i.gyazo.com/d85b9d8a5384829589b715c2c36fb059.png当屏幕宽度正常时，这看起来很好。然而，当它变小时，图像也会变小，因为它是响应式的。但内容并没有变小。 https://i.gyazo.com/0af7d841c695912cda3bd266174238e1.png 为了让它 100% 匹配图像，我必须弄清楚图像对于每个屏幕尺寸的样式是如何设计的。所以我想知道是否可以让内容 block 跟随图像高度？

Answer 1

您应该为此使用 flex 属性。在此示例中，图像宽度是固定的，但您也可以将其放入 % 或 em

*{
  box-sizing: border-box;
}
body, html{
  height: 100%;
  width: 100%;
  margin: 0;
}
.container{
  width: 100%;
  display:flex;
  flex-direction:row;
}
.container img{
  display:block;
    margin: 0 auto;
    width:200px;
    flex-shrink:0;
}

.icontainer
{
    margin:0;
    background-color:red;
    border: 0.2em solid black;
    flex-shrink:0;
    flex-grow:1;
}

<div class="container">
  <img src="http://images.fineartamerica.com/images-medium-large-5/sunflower-abstract-by-nature-square-lee-craig.jpg"/>
  <div class="icontainer">
    <p>content</p>
  </div>
 </div>