如何防止嵌套在另一个div中的div超出特定的页面宽度？

Question

我有一系列图像（比方说，每个 div 一个），在经过某个显示后，我希望停止在屏幕中增长，直到下一个媒体查询。我怎样才能做到这一点？

我尝试在父 div 中使用最大宽度（比方说，550 px），但它根本不起作用。如果我在感兴趣的 div 中使用这个属性和值，它们实际上会停止增长，但它们以一种奇怪的方式做到这一点：图像停止增长，但它们不会保留在页面的中心，而是某种 margin-right 开始越来越多。为什么？

#cassettes-container {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    padding-left: 2vw;
    padding-bottom: 4vw;
    padding-right: 2vw;
    text-align: justify;
    background-color: #1e1916;
    font-size: 3.8vw;
}

.mid-cassette {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    margin-top: 1em;
    margin-bottom: 0;
}

.top-in {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    margin-top: 10%;
}

.zoom-1 {
    width: 75%;
    height: auto;
    margin-bottom: 2%;
}

.cass-tab td {
    padding: 3px 2.5em;
}

.down-in {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    margin-left: 1.5em;
}

<div id="cassettes-container">
            <div class="mid-cassette">
                <div class="top-in">
                    <img src="assets/images/darso-maripi.jpg"
                        alt="An image of the cassette album cover by Darso (showing himself with a head scarf)"
                        class="zoom-1">
                    <table class="cass-tab">
                        <tr>
                            <td class="artist">Darso</td>
                            <td class="year">1991</td>
                        </tr>
                        <tr>
                            <td class="album-name">Maripi</td>
                            <td class="condition"
                                title="These acronyms relate to a standard global grading scale for the record. To know more, click on the item">
                                <a href="https://www.goldminemag.com/collector-resources/record-grading-101"
                                    target="_blank" rel="noopener noreferrer">VG+/VG+</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="genre">Calung/Folk</td>
                            <td class="price">20€</td>
                        </tr>
                        <tr>
                            <td class="country">Indonesia</td>
                            <td class="format">MC</td>
                        </tr>
                    </table>
                </div>
                <div class="down-in">
                    <details>
                        <summary>► More about this</summary>
                        <p>One of the dozens of albums published for the Asmara Records by the Indonesian artist Darso
                            (or Hendarso, according to the period or the case). Leading exponent of the Sundanese genre
                            called calung,
                            we can just love his entire musical production (not limited to the calung, by the way).
                            Great music for meditation or workout.</p>
                    </details>
                    <div id="audioplayer">
                        <audio id="audio" controls>
                            <source src="assets/audio/darso-maripi-extract.mp3" type="audio/mpeg">
                            Your browser does not support the audio tag.
                        </audio>
                    </div>
                    <button>Buy a piece of history</button>
                </div>
            </div>

Answer 1

首先，您可以在图像中设置宽度，并在媒体查询中设置新的宽度（任意大小）。

你没有使用 max-width: 150px;在父 div 中，您在标签中使用它。

如果 max-width 不需要写成 px 可以设置成 %。这是使其响应的简单方法。

.child{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

img {
    max-width: 400px
}




@media (min-width: 1120px) {
   img {
        max-width: 1000px
    }

 }

@media (min-width: 720px) and (max-width: 1119px) {
    img {
        max-width: 500px
    }
 }


@media (max-width: 719px) { 
    img {
        max-width: 200px
    }
}


or

.child {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

img {
    max-width: 90%;
}

<div class="parents">
        <div class="child"><img src="./louis-magnotti-YvCg5X3pWzc-unsplash-1.jpg" alt=""></div>
        <div class="child"><img src="./louis-magnotti-YvCg5X3pWzc-unsplash-1.jpg" alt=""></div>
        <div class="child"><img src="./louis-magnotti-YvCg5X3pWzc-unsplash-1.jpg" alt=""></div>
        <div class="child"><img src="./louis-magnotti-YvCg5X3pWzc-unsplash-1.jpg" alt=""></div>
    </div>