0

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

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

我尝试了什么：我了解了 max-width 和 max-height ...正如您在下面的代码中看到的那样，我已经尝试了这两种方法，但是尽管专门设置了最大高度和宽度，它们仍然会扩展并制作缩略图尴尬的尺寸。

我究竟做错了什么？

提前致谢！

问题：

http://puu.sh/2VfR6.png

的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;
}
4

1 回答 1

1

您在错误的元素上设置了max-widthand 。改为max-height打开它们。.pBoxThumbnail

于 2013-05-17T14:18:57.807 回答