使用overflow在包裝器中擬合圖像：hidden（CSS/HTML/PHP）

-1

我有一個裝滿產品圖像的目錄。我試圖將每張圖像顯示爲150px x 150px而不會扭曲圖像，並在產品代碼（圖像名稱）和圖像本身周圍放置邊框。這是它看起來像現在： enter image description here 使用overflow在包裝器中擬合圖像：hidden（CSS/HTML/PHP）

我想形象和產品代碼坐到底邊框的，但我有問題，因爲我是一個小白和使用overflow:hidden。基本上我希望中心圖像看起來像另外兩個。

這裏是（使用php，因爲我以後需要訪問sql）我PHP代碼：

<php 
$dir = "/some/location/"; 
if ($opendir = opendir($dir)){ 
    while(($file= readdir($opendir))!== FALSE){ 
     if($file!="."&&$file!=".."){ 
      echo('<div class = "image" > '); 
      echo "<img src='/some/location/$file'><br>"; 
      $sku = substr($file,0,-4); 
      echo("<p>"); 
      echo($sku); 
      echo("</p>"); 
      echo("</div>");} } } 
?>

CSS代碼：

<style> 
div.image { 
     display: inline-block; 
     height: 170px; 
     width: 170px; 
     border-style: solid; 
     border-color: green; 
     overflow: hidden; 
     margin: 10px auto; 
     margin-left: 10px; 
     margin-right: 10px; } 

    div.image img { 
     max-height: 135px; 
     max-width: 135px; 
     padding-left: 25px; 
     padding-right: 25px; } 
</style>

來源

2015-06-18 Alina DW

爲什麼你包含你的PHP代碼？這個問題與PHP無關，只是給我們HTML – Beat

設置position: relative;到您的外（包裝容器，用邊界）。然後在一個div包裹圖片和文字的下方，設置它的CSS這樣的：

.image-wrap { 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    width: auto; 
    height: auto; 
}

它應該爲你做的工作。

來源

2015-06-18 19:59:05

Nikolav的回答效果很好（雖然，你並不需要設置在圖像配，包裝DIV所有這些屬性 - 位置和底部將實現你的目標），但如果你不希望添加額外的將div封裝到你的HTML中，你可以將你的.image容器div中的p和img完全定位。

你願意給的0像素你爸底部：

p { 
     position: absolute; 
     bottom: 0px; 
    }

然後你需要知道你的p元素的高度，使你可以給你的IMG至少一個底部，所以它位於所述p的上方。如果你的p高20px，那麼你會使用：

.image img { 
     position: absolute; 
     bottom: 20px; 
    }

來源

2015-06-18 21:36:34 janeemac

使用overflow在包裝器中擬合圖像：hidden（CSS/HTML/PHP）

回答

相關問題