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

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

<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

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

回答

相關問題