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 に答える