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

Question

为了使其快速，我有一个响应侧栏（使用viewport），顶部有一个图像。侧栏是200px宽，我的图像设置为200px宽。所以只要我的侧边栏留在左边，它看起来就很好看。当侧边栏移动到顶部时，image居中（这是正确的），但是我会在图像前后得到空格，这些空格是容器（侧边栏）的颜色。我要那些空格是黑色的。

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

我想到了使用一个有3列的表。但是我不确定如何设置第1和第3列来使用剩余的空间，而中心列总是200px（环绕固定在200px的图像）。所以假设屏幕是700px，中心是200px，第一个和第三个应该是250px各。我尝试使用一个类并在@media下将其设置为250px（最大宽度为700px@media）和50px（最大宽度为400px@media）,但似乎不起作用。不能让单元格占用所有空间（因为它是空的？）甚至直接或通过类在单元格上设置黑色，侧栏颜色始终存在（也许我应该添加一个显示设置，使其覆盖侧栏？）。当它是全屏的时候，比如在PC上，所以超过700px，第一和第三行不应该影响外观，应该是0px，或者是1px，图像可以设置为198px。如果我每边有一个1px的黑色也没关系。反正它会合身的。

我对HTML/CSS一无所知。

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

null

<div class="sidebar">
  <img src="https://via.placeholder.com/200" border="0" style="width:200px" class="center">
  
  <table border="0" align="center">
    <tr>
      <td><a href="index.html">Français</a></td>
      <td><a href="index_en.html">English</a></td>
    </tr>
  </table>
  
  <a class="active" href="index_en.html">Main page</a>
  <a href="files.html">Files</a>
  <a href="video_en.html">Videos</a>
</div>

null

请注意，徽标不在表中。我从编码中删除了表格部分。因为只要我添加一个表，我就会在表周围添加一些填充，显示表周围的侧栏颜色。

有什么办法吗？就像一个非常快速的解决办法？我一定缺了什么东西。使用viewport和@media来缩放/移动东西对我来说是新的。

谢谢你的帮助！

Answer 1

我想如果你加上

padding="0" 

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

<div class="sidebar">
<img src="/img/logo.png" border="0" style="width:200px" class="center" padding="0">
<table border="0" align="center">
    <tr>
        <td><a href="index.html">Français</a></td>
        <td><a href="index_en.html">English</a></td>
    </tr>
</table>
  <a class="active" href="index_en.html">Main page</a>
  <a href="files.html">Files</a>
  <a href="video_en.html">Videos</a>
</div>

请记住，我还是HTML的新手，所以如果这不起作用，请让我知道！

好的，有人在我的padding=“0”上纠正了我。再读一遍这个问题，你可以尝试设置

width="auto"

然后更改css标题中的最大宽度？我有点不知所措，也不知道该怎么帮忙：（。