Html 填充周围的empy空间，并在响应侧边栏上显示图像

为了加快速度，我有一个响应性侧栏（），顶部有一个图像。侧边栏的宽度为200px，我的图像的宽度设置为200px。所以只要我的边栏保持在左边，它看起来就不错。当侧边栏移到顶部时，图像居中（这是正确的），但在图像前后我都有空间，这些空间是容器的颜色（侧边栏）。我希望这些空间是黑色的

我试过宽度：100%。由于图像需要200px，因此当它位于左侧时，它将适合容器。但是一旦它移到顶部，容器的宽度就会改变以适应屏幕/窗口的大小，图像就会变得太大。将最大宽度设置为200px解决了这个问题，但我仍然在每一侧获得这些空间

我想用一个有3列的表。但我不确定如何设置第一列和第三列以使用剩余空间，而中心列始终为200px（环绕图像，固定为200px）。所以让我们假设屏幕是700px，中心是200px，第一个和第三个分别是250px。我尝试使用一个类，在@media下，将700px最大宽度@media设置为250px，400px@设置为50px，但似乎不起作用。无法让单元格占据所有空间（因为它是空的？），甚至直接或通过类在单元格上设置黑色，侧边栏颜色始终存在（可能我应该添加一个显示设置，使其位于侧边栏上？）。当它像在PC上一样全屏显示时，超过700px，第一排和第三排应该不会影响外观，并且每排为0px，或者每排为1px，图像可以设置为198px。如果我的每一面都有一个1像素的黑色，这并不重要。它无论如何都适合

我完全不懂HTML/CSS，而且我对HTML/CSS一窍不通

我没有做任何编码，因为我不确定我的CSS需要什么部分（大部分都在上面的链接中，我只是更改了颜色）。至于HTML部分，不应该有任何有价值的东西

---

我认为如果您添加

padding="0" 

在img标签内部，它应该执行以下操作（例如：

---

然后更改css标题中的最大宽度？我有点不知所措，我不知道该如何帮助：（.

最后，如果它最终能帮助某人。这可能不是最佳做法或最佳解决方案，但它是有效的

我创建了一个宽度为700x的徽标（我的徽标是200px，因此我在每侧添加了250px的黑条），这样它可以缩小到400px（用于我的视口）。然后在我的CSS中添加：

.logo {
    background: url(/img/logo700px.png) no-repeat center;
    background-size: cover;
    height: 100px;
}

然后在我的HTML中，我更改了我的

img

<div class="logo">&nbsp;</div>

它就像一个魔咒。嗯……在Chrome和Firefox PC和Android上都进行了测试。因此，现在我的图像总是集中在侧栏上。在大屏幕上，它只显示所需的200px（受侧栏CSS限制），当它切换到更大宽度的顶部栏时，它会将徽标居中，并保持黑色栏填满

div

容器

---

查看的源代码（摘自）帮助我理解并调整它以适应我的需要。

这是因为图像的高度小于侧栏的高度。因为这样的图像需要一个

包含
、
封面
或
拉伸
值。
填充：0；
是默认值。因此它不做默认情况下没有做的事情。空白区域被创建为图像dOES没有一个无限的高度。<代码>宽度= Auto/<代码>将不会修复它，因为图像仍然会使所有的宽度都留给我一个图像太大。我不认为任何图像都会修复固定大小留下的空白。我猜最好的方法是使用一个表，并用第一和第三单元做一些事情来适应和覆盖。图像不够宽时的侧边栏颜色。如果我可以指定@media应该显示什么图像，那么当屏幕大小为最大400px时，我会显示宽度为100%的400px图像和宽度为400px的400px图像（每侧带有黑带的徽标）当它是700px最大值时，标志两边都有更大的黑色条纹。这就可以了。这有意义吗？可能吗？很好地解决了这个问题！
.logo {
    background: url(/img/logo700px.png) no-repeat center;
    background-size: cover;
    height: 100px;
}

<div class="logo">&nbsp;</div>