Question

我设计了一个动态网站，以便浏览器的宽度允许内容进行调整。但是在这个特定页面上，firefox中的浏览器大小只会给我带来问题：

在调整屏幕大小时，文本超出了它的边距并与firefox上的图像冲突。尝试一下，让我知道。 css也非常简单。

.nav-phone>a:nth-child(3) {
    background-color: #fbc076;
}

.nav>a:nth-child(3) {
    background-color: #fbc076;
}

.newbox {
    background-color: white;
    display: block;
    margin: auto;
}

.readiblecolumns {
    background-color: white;
}

.readiblecolumns>p {
    line-height: 1;
}

/* Desktop */
@media screen and (min-width: 960px) {

    .newbox {
        height: auto;
        width: 80vw;
    }

    /* Reads Like Newspaper */
    .readiblecolumns {
        width: 80vw;
        padding: 20px;
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .readiblecolumns>p {
        font-size: 100%;
    }

    .profile {
        height: 480px;
        margin-bottom: 20px;
    }

    .profile img {
        height: 100%;
        width: auto;
        margin-bottom: 20px;
    }

}

/* Tablet */
@media screen and (min-width: 520px) and (max-width: 959px) {

    .newbox {
        height: auto;
        width: 80vw;
    }

    .readiblecolumns {
        width: 80vw;
        padding: 20px;
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .readiblecolumns>p {
        font-size: 100%;
    }

    .profile {
        height: 320px;
        margin-bottom: 20px;
    }

    .profile img {
        height: 100%;
        width: auto;
        margin-bottom: 20px;
    }

}

/* Phone */
@media screen and (max-width: 519px) {

    .newbox {
        height: auto;
        width: 90vw;
    }

    .readiblecolumns {
        width: 90vw;
        padding: 15px;
    }
}

html如下：

<div class="newbox">
    <div class="readiblecolumns">
        <div class="profile">
            <img src="Pictures/MyLife/mypicture.jpg" alt="">
        </div>
        <p>Miusov, as a man man of breeding and deilcacy, could not but feel some inwrd qualms, when he reached the Father Superior's with Ivan: he felt ashamed of havin lost his temper. He felt that he ought to have disdaimed that despicable wretch, Fyodor Pavlovitch, too much to have been upset by him in Father Zossima's cell, and so to have forgotten himself. "Teh monks were not to blame, in any case," he reflceted, on the steps. "And if they're decent people here (and the Father Superior, I understand, is a nobleman) why not be friendly and courteous withthem? I won't argue, I'll fall in with everything, I'll win them by politness, and show them that I've nothing to do with that Aesop, thta buffoon, that Pierrot, and have merely been takken in over this affair, just as they have."</p>
    </div>
</div>

Answer 1

它与.profile{width:480px;}有关，然后是.profile img{height:100%; width:auto;}。当浏览器大小更改宽度时，图像仍然基于.profile的100％高度（可能根本没有更改），因此它不会按照您希望的方式进行缩放。无论如何，您的图像应该非常适合矢量缩放的原始页面加载设计。给.profile正确的高度和宽度，然后您可以设置.profile img{height:100%; width:100%;}。

我的网站在firefox中没有用 - 文本超出了保证金

1 个答案: