php - 使用溢出 :hidden (CSS/HTML/PHP) 在包装器中拟合图像

Question

我有一个充满产品图片的目录。我试图将每个图像显示为 150pxx150px 而不扭曲图像并在产品代码(即图像名称)和图像本身周围放置边框。这就是现在的样子:

我希望图像和产品代码位于边框底部，但我遇到了问题，因为我是菜鸟并且使用了 overflow:hidden。本质上，我希望中心图像看起来像其他两个图像。

这是我的 PHP 代码(使用 php 因为我稍后需要访问 sql):

<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>

Answer 1

将 position: relative; 设置为外部(包装容器，带边框)。然后将图像和文本包裹在一个 div 中，并像这样设置它的 css:

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

它应该为您完成这项工作。