1

含まれている要素の幅全体に画像を引き伸ばすのに問題があります。ページ レイアウトは 2 列の可変レスポンシブです。メインコンテンツは左側の列に含まれていますが、「余分な」ものは右側の列に含まれています. 右上のサイドバーに表示する 400x400 の画像を作成しました ( class = "top-sidebar")。私の人生では、画像の幅を上部のサイドバーの幅に合わせることができません。ここに私のコードスニペットがあります:

HTML:

<aside class="top-sidebar">
        <article>
            <p><img src="images/callustoday.jpg" alt="Call us today at 716-200-7397 to start training!"/></p>
        </article>
    </aside>

対応する CSS:

.top-sidebar {
    width: 22%;
    float: left;
    background-color: #efefef;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 2% 0 0 2%;
    padding: 0;
}

.top-sidebar img {
    max-width: 100%;
    margin: 0 auto;
    height: auto;
    display: block;
}

margin-left: autoフラストレーションを増すために、とを使用して親コンテナ内で画像を中央に配置することさえできないようですmargin-right: auto

4

3 に答える 3

1 
.callustoday {
    background-image: url(yourimage.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

border: 1px red solid;画像を含むボックスの大きさも確認するためにa をチャックする必要があります。そうすれば、何が起こっているかを常に確認できます。

于 2016-05-01T00:38:04.867 に答える