在300像素內將圖像置於300像素的表格中

我的代碼位於下方，我正在尋找通過CSS將圖像（水平和垂直）置於300×300像素正方形中的最佳方式。較大的圖像將適合該尺寸，較小的圖像應居中，而不是拉伸。在300像素內將圖像置於300像素的表格中

<table width="100%"> 
    <tr> 
    <td><div class="300box"><img class="centeredimage" /></div></td> 
    <td><div class="300box"><img class="centeredimage" /></div></td> 
    <td><div class="300box"><img class="centeredimage" /></div></td> 
    </tr> 
</table>

CSS：

.300box { 
    height: 300px; 
    width: 300px; 
} 

.centeredimage { 
    vertical-align: middle; 
    text-align: center; 
}

我知道上面是不正確，所以我希望能找到一個更有效的方式來做到這一點。每個表格行都有3個300x300像素的div，圖像居中。

來源

2012-09-11 jethomas

這裏有一些解決方案，雖然我不知道你是否將能夠實現他們：http://blog.themeforest.net/tutorials/vertical-centering-with-css/ – aurbano

你需要'div'來環繞'img'嗎？你可以將'vertical-align'和'text-align'添加到'td'，並且應該這樣做。 – Scrimothy

此外，班級名稱不應以數字嘗試'.box300'開頭 – Scrimothy

在td中使用div並不比其他使用表格的方法更差。

您可以嘗試this--

CSS：

.blocks.table td { 
    width: 300px; 
    height: 300px; 
    border: 1px solid #ff0000; 
    vertical-align: middle; 
    text-align: center; 
} 
p.centeredimage img { 
    max-height: 300px; 
    max-width: 300px; 
}

HTML：

<table width="100%" class="table blocks"> 
    <tr> 
     <td> 
      <p class="centeredimage" ><img src = "http://a1.sphotos.ak.fbcdn.net/hphotos-ak-ash4/185106_431273290248855_254736287_n.jpg" /></p> 
     </td> 

     <td> 
      <p class="centeredimage" ><img src = "http://a6.sphotos.ak.fbcdn.net/hphotos-ak-ash4/304640_10151181184992355__n.jpg" /></p> 
     </td> 
     <td> 
      <p class="centeredimage" ><img src = "http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc7/s480x480/422953_410146439043183_1035950087_n.jpg" /></p> 
     </td> 
     <td> 
      <p class="centeredimage" ><img src = "http://sphotos-e.ak.fbcdn.net/hphotos-ak-ash3/s480x480/561574_467101546644877_728463753_n.jpg" /></p> 
     </td> 
    </tr> 
</table>

來源

2012-09-13 06:16:45

這很好，謝謝。但是現在，如果我想在每張圖片下方添加一段文字，如果圖片小於300px，文字將顯示在圖片的正下方。我該怎麼做，以便圖像的所有文本都被強制到表格單元格的底部？ – jethomas

留下您的代碼完全一樣的，改變這種風格的一個定義：

.centeredimage { 
    margin: auto; 
}

你說你要放大圖像被迫不超過300個像素大？我知道max-width屬性有時會起作用（但當然IE8很不喜歡它），但我不知道它在圖像上的效果如何（從來沒有親自測試過），但補充一點，你只是將max-width：300px添加到您的centeredimage類。

經過反思，其他人也說了同樣適用：將你的.300box類應用到td，並擺脫div。對於你所描述的，他們沒有必要。

來源

2012-09-11 21:49:05

此技術不起作用，圖像水平居中但不垂直。這是垂直部分，似乎並不堅持。 – jethomas

是否可以附加截圖？而且：對於垂直居中，您希望每個圖像都位於其表格單元中，並且圖像在該行中可能具有不同的大小，對嗎？ – 2012-09-12 22:07:07

在300像素內將圖像置於300像素的表格中

回答

相關問題