1

我无法让图像拉伸包含元素的整个宽度。页面布局是两列流体响应。主要内容包含在左栏中，而“额外”内容包含在右栏中。我创建了一个 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: autoand让图像在其父容器中居中margin-right: auto

4

3 回答 3

1

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

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

可以在这里找到解决方案

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;
}
于 2013-07-29T22:40:38.197 回答
1 
.callustoday {
    background-image: url(yourimage.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

您也应该border: 1px red solid;查看包含图像的框有多大；这样，您总是可以看到正在发生的事情。

于 2016-05-01T00:38:04.867 回答
0

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

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

于 2013-07-29T22:40:02.090 回答