如何将响应图像与 table 并排对齐

Question

我在右侧有一个 table，我希望在左侧有一张图像与 table 对齐。问题是当调整页面大小时，图像大小不遵循 table.

.div-contains{
    background-image: url("http://www.castan.pt/castan/wp-content/uploads/2014/07/img-teste-02.jpg");
    position: relative;
    background-repeat: no-repeat;
    background-size: 100%;
}
.div-forum{
    overflow-x:auto;
    background-color:white;
    width:75%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
th, td {
  text-align: left;
  padding: 8px;

}
tr{
   border-bottom: 1px solid #ddd;
}

<!DOCTYPE html>
<html>
  <head>
    <style>

    
    </style>
  </head>
  <body>
    <div class="div-contains" >
      <div class="div-forum" >
        <table>
          <tbody>
            <tr>
              <td>0</td>
              <td>1</td>
              <td>2</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>yrdyr</td>
              <td>yrdyr</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>yrdyr</td>
              <td>yrdyr</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>yrdyr</td>
              <td>yrdyr</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>yrdyr</td>
              <td>yrdyr</td>
            </tr>

          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

我希望 table 和图像 syde 并排，当有人调整屏幕大小时两者具有相同的尺寸。 https://imgur.com/lMNkOdi.png

Answer 1

如果一定要设置图片为背景，设置在右边，就这样：

在你的 div-contains 中设置这个属性:

background-size: 25%; /* From a 100% set 25% as your table width take 75% */
background-position: right; /* set it to the right */

演示

.div-contains{
    background-image: url("http://www.castan.pt/castan/wp-content/uploads/2014/07/img-teste-02.jpg");
    position: relative;
    background-repeat: no-repeat;
    background-size: 25%; /* From a 100% set 25% as your table width take 75% */
    background-position: right; /* set it to the right */
}
.div-forum{
    overflow-x:auto;
    background-color:white;
    width:75%;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
th, td {
  text-align: left;
  padding: 8px;

}
tr{
   border-bottom: 1px solid #ddd;
}

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <div class="div-contains" >
      <div class="div-forum" >
        <table>
          <tbody>
            <tr>
              <td>0</td>
              <td>1</td>
              <td>2</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>yrdyr</td>
              <td>yrdyr</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>yrdyr</td>
              <td>yrdyr</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>yrdyr</td>
              <td>yrdyr</td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>yrdyr</td>
              <td>yrdyr</td>
            </tr>

          </tbody>
        </table>
      </div>
    </div>
  </body>
</html>

如何将响应图像与 table 并排对齐

How to align responsive image side by side with table

html

css

responsive

演示