使用overflow：hidden（CSS / HTML / PHP）在包装器中拟合图像

Question

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

我希望图片和产品代码位于边框的底部，但我遇到问题因为我是菜鸟并使用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;
}

它应该为你做好准备。

Answer 2

Nikolav的答案很有效（尽管你不需要在.image-wrap div中设置所有这些属性 - position和bottom将实现你的目标）但是如果你不想添加那个额外的包装器div到你的HTML你可以绝对将p和img放在你的.image容器div中。

你给p的底部0px：

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

然后你需要知道你的p元素的高度，这样你就可以给你的img一个至少底部，以便它位于p的上方。如果你的p高20px，那么你可以使用：

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