图像不会拉伸容器宽度

Question

我无法让图像拉伸包含元素的整个宽度。页面布局是两列流体响应。主要内容包含在左栏中，而“额外”内容包含在右栏中。我创建了一个 400x400 的图像，我希望它出现在最右侧的边栏中 (class = "top-sidebar")。我一辈子都无法让图像的宽度适合顶部侧边栏的宽度。这是我的代码 sn-ps：

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 使图像在其父容器中居中

Answer 1

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

您也应该使用border: 1px red solid; 来查看包含图像的框有多大；这样，您始终可以看到发生了什么。

Answer 2

对于后半部分： 使用margin: auto 仅适用于居中，如果您应用样式的块元素具有定义的宽度，以像素为单位。例如，如果您为图像指定 300 像素的宽度，它将居中。由于这不是一个选项，我建议采用不同的方法：

将图像作为background-image 放在article 标签上怎么样？ 这样，您可以使用background-position: center 使图像居中，并使用background-size: cover 使其跨越整个宽度

可以找到解决办法here

HTML：

<aside class="top-sidebar">
    <article class="callustoday">
    </article>
</aside>

CSS：

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

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

Answer 3

使用这样的浏览器缩放图像是一种不好的做法，因为它往往会产生额外的开销（不必要的大文件大小/分辨率）或糟糕的用户体验（由于放大或不正确的纵横比导致像素化的低分辨率图像） .

话虽如此，您只是在 CSS 中设置img 的max-width。您是否也尝试过设置width: 100%？如果这不起作用，也可以尝试将float: left; 添加到.top-sidebar img