Question

我正在尝试创建一个基本图像预览框，您可以在其中看到左侧的大图像，以及右侧的缩略图中的一组小图像。

我需要缩略图永远不会超过一定的宽度/高度，以便它们保持整齐的顺序以便观看快乐。

我尝试了什么：我了解了max-width和max-height ...正如你在下面的代码中看到的那样，我已经尝试过这两种方法，但是尽管专门设置了最大高度和宽度，它们仍然会扩展使缩略图变得笨拙。

我做错了什么？

提前致谢！

问题：

HTML：

<div class="pictureBoxContainer">
    <div class="pictureBox">
        <div class="pBoxLeftColumn">
            <?php
                echo "<div class='pBoxLargeImageContainer'>";
                echo "<img src='$pictureLinks[0]' alt='Primary Image' class='pBoxLargeImage'>";
                echo "</div>";
            ?>
        </div>
        <div class="pBoxRightColumn">
            <?php
            foreach ($pictureLinks as $picture) 
            {
                echo "<div class='pBoxThumbnailContainer'>";
                echo "<img src='$picture' alt='Thumbnail' class='pBoxThumbnail'>";
                echo "</div>";
            }
            ?>
        </div>
    </div>
</div>

CSS：

.pictureBoxContainer {
    margin-top: 300px;
    padding: 12px;
    clear:left;
    clear:right;
    width: 100%;
    background-color: #F7D961;
    border-radius: 12px;
    max-height: 600px;
}

.pictureBox {
    background-color: #FFF;
    border-radius: 12px;
    width: 97%;
    overflow: auto;
    padding: 12px;
}

.pBoxLeftColumn {
    display: block;
    float: left;
    min-width: 49.99%;
    max-width: 49.99%;
    overflow: auto;
}

.pBoxRightColumn {
    display: block;
    float: right;
    min-width: 49.99%;
    max-width: 49.99%;
    overflow: auto;
}

.pBoxSmallImageContainer {
    max-height: 20%;
    max-width: 20%;
    float: left;
    padding: 3px;
    margin: 3px;
    background-color: #F7D961;
    border-radius: 2px;
}

.pBoxSmallImage {
    padding-top: 2px;
}

.pBoxLargeImageContainer {
    width: 100%;
}

.pBoxLargeImage {
    border-radius: 6px;
    min-width: 450px;
}

Answer 1

您已将max-width和max-height设置在错误的元素上。将它们设置在.pBoxThumbnail上。

如何调整图像大小以适应特定的缩略图宽度/高度？

1 个答案: