html表格中的超大圖片

我想在兩欄中的html中創建一個表格。第一個是圖像，第二個是伴隨文字。html表格中的超大圖片

我使用的圖片很小，所以我決定伸展它。但是當我拉伸圖像時，td不會相應拉伸（高度增加，但寬度不會）。

因此，第一列的圖像與第二列的圖像重疊。有沒有人有建議使表格單元格調整大小以適應圖像？

謝謝！

這裏的CSS：

table 
{ 
width: 100%; 
} 

td 
{ 
    vertical-align: middle; 
    padding: 1em 1em 1em 1em; 
    margin: 0em 0em 0em 0em; 
    width: auto; 
} 

#img1 
{ 
    padding: 0em 0em 0em 0em; 
    margin: 0em 0em 0em 0em; 
    vertical-align: top; 
    width: 150%; 
    display: block; 
}

這裏的HTML：

<div> 
    <table> 
     <tr> 
      <td nowrap><img id="im1" src="../images/dragon.gif" /></td> 
      <td> 
       <div id="text-quote"> 

        <p>Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna</p> 

       </div> 
      </td> 
     </tr> 
    </table> 
</div>

來源

2015-04-06 GHH

請注意，您可以直接設置圖像「高度」和「寬度」。 –

由於圖像是內聯元素，因此容器不會根據圖像大小進行拉伸。您需要爲圖像指定「display：inline-block」。 – Diptendu

嘛。您將圖像的寬度設置爲150％，因此顯然是容器的150％，在這種情況下，它是表格單元格，因此它可以正確顯示。

如果你想使圖片的大小增加，增加<TD>的寬度，讓你的形象的100％的寬度（所以它會採取TD寬度的100％）

.imageTD {width:150%;} 
#im1 { 
    padding: 0em 0em 0em 0em; 
    margin: 0em 0em 0em 0em; 
    vertical-align: top; 
    width:100%; 
    display: block; 
}

FIDDLE

來源

2015-04-06 17:24:02

或指定px – ferr

中的圖像寬度，這是正確的:) –

html表格中的超大圖片

回答

相關問題