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

像假设你有一个形象如何使一个元素遵循另一个元素大小

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

来源

2016-12-19 Daniel Alsaker

您应该使用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>

来源

2016-12-19 11:29:44 ab29007

Flex是伟大的具有相同高度的多个容器。但是如果你只有2个元素需要相同的高度，你不应该使用'vh'吗？更少的努力。 –

@ShobhitSrivastava这不起作用，因为图像缩放比例不同。试过，已经 –

哦，权利，图像！ –

使用相同的CSS类两个图像

img 1

img 2

.imageClass{ 
 
height: 100px; 
 
}

<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" >

来源

2016-12-19 11:27:32

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

回答

相关问题