Css 图像赢得'；拉伸容器宽度

我在获取图像以拉伸包含元素的整个宽度时遇到问题。页面布局为两列流体响应式。主要内容包含在左栏，而“额外”内容包含在右栏。我创建了一个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>

---

更令人沮丧的是，我甚至无法使用

左边距：auto

和

右边距：auto

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

也就是说，您只需在CSS中设置

img

的

max width

。您是否也尝试过设置

宽度：100%

？如果这本身不起作用，也可以尝试添加

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

将图像作为
背景图像
放在
文章
标签上如何？
这样，您就可以使用
背景位置：居中来居中图像，并使用
背景大小：封面使其覆盖整个宽度

可以找到解决办法

HTML:

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

您应该夹住一个
边框：1px红色实体
查看包含图像的框有多大；这样，您可以随时看到发生了什么。
我尝试过img的width:100%和float:left，但没有效果。如果我有更多的代表点，我可以发布一张实际问题的图像，但基本上图像只占实际列宽的80%（即使列宽比原始px宽度小得多）。您的
img
标记位于
标记内，段落元素是否有影响图像最大大小的边距/填充？我去掉了
标记，对
img
维度没有影响。我将
img
设置为
文章
上的
背景图像
，它甚至没有出现。有趣的是，我还尝试将
img
设置为固定的像素宽度。它仍然不会在其包含的元素中居中。我想知道包含元素的实际尺寸是否会出现一些奇怪的情况，这会导致它只跨边栏宽度的80%左右。添加了可能的实现
<aside class="top-sidebar">
    <article class="callustoday">
    </article>
</aside>

.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;
}

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