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％匹配，我必须弄清楚每个屏幕尺寸的图像样式。所以我想知道我是否可以让内容块跟随图像高度？

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>

Answer 2

对两个图像使用相同的css类

img 1

img 2

＆＃13;

.imageClass{
height: 100px;
}

＆＃13;

<img class="imageClass" src="https://s-media-cache-ak0.pinimg.com/originals/bd/8c/24/bd8c241fb4c6b19a48668ae993cd0a34.jpg" >
<img class="imageClass" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTrgEmBoOkIN4gekFDarSmiHlv83AK_7UuQW9SDBJYUM-qhb9AK" >

＆＃13;

如何使一个元素遵循另一个元素大小

2 个答案: