如何在100％高度的桌子上放置圖像？

我無法設法讓圖像適合css製作表的高度100％。正如你在下面看到的，表格和圖像完全忽略了父元素的尺寸。如何在100％高度的桌子上放置圖像？

一切都需要動態的，這就是爲什麼我使用百分比。

.img { 
 
    max-width: 50%; 
 
    height: 100px; // <-- This should be able to be dynamic (anything) 
 
} 
 

 
.img .table { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.img .row { 
 
    display: table-row; 
 
} 
 

 
.img .cell { 
 
    display: table-cell; 
 
} 
 

 
.img .row.img-el, 
 
.img .row.img-el .cell { 
 
    height: 100%; 
 
} 
 

 
.img img { 
 
    max-width: auto; 
 
    height: 100%; 
 
}

<div class="img pull-left gap-right bigger"> 
 
    <div class="table"> 
 
    <div class="row img-el"> 
 
     <div class="cell"><img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg" style="height:100%;float:left" /></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell img-text">Hello</div> 
 
    </div> 
 
    </div> 
 
</div>

預期結果：

更新：是否有可能以任何方式柔性解決這個問題？

來源

2017-04-20 Peter Westerlund

你有與預期結果的圖像？我不知道你明白你在做什麼... – Badacadabra

@Badacadabra已更新帖子 –

-1

你必須給它一個像200px這樣的特定高度，它不能佔據100％的高度。如果你有一個高度爲200px的盒子，你可以使圖像高度爲100％，這是200px

來源

2017-04-20 15:09:48

這是你所需要的？

.img { 
 
    max-width: 50%; 
 
    max-height: 100%; 
 
} 
 

 
.img .table { 
 
    display: table; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.img .row { 
 
    display: table-row; 
 
} 
 

 
.img .cell { 
 
    display: table-cell; 
 
} 
 

 
.img .row.img-el, 
 
.img .row.img-el .cell { 
 
    height: 100%; 
 
} 
 

 
.img img { 
 
    max-width: auto; 
 
    height: 100%; 
 
} 
 

 
.cell img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="img pull-left gap-right bigger"> 
 
    <div class="table"> 
 
    <div class="row img-el"> 
 
     <div class="cell"><img src="https://1.bp.blogspot.com/-9QM7ciGXRkQ/V1hsB-wNLBI/AAAAAAAAMoA/eYbSHs00PTAjrI4QAmvYAIGCUe1AuRAnwCLcB/s1600/bryan_cranston_0095.jpg" style="float:left" /></div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="cell img-text">Hello</div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-20 15:09:52 sol

問題是，這需要一個自由的身高。如果'.img'元素的高度爲100像素。表格和圖像正在經過。：/ –

如何在100％高度的桌子上放置圖像？

回答

相關問題