Question

我有一张表，第一个单元格中有一个图像，下一个单元格中有文本。该页面将与所有设备一起查看，因此我需要保持响应性（和表格）。

一切似乎都有效 - 图像居中，反应灵敏等等。但是，有些图像太高了。所以我设置了最大高度，但现在图像失去了宽高比。

如果我将宽度和高度设置为自动，我会失去响应能力，而我找不到能够保持宽高比，设置最大宽度和高度并且仍保持响应能力的解决方案吗？

＆＃13;

table {
  width: 90%;
  max-width:800px;
  }

table td {
  padding:10px;
  border-bottom:solid black 2px;
  text-align:center;
  vertical-align:middle;
}
table td:first-child {
  width: 50%;
  }
table td img {
  max-width:180px;
  max-height:70px;
  }

＆＃13;

<table>
  <tr>
    <td>
      <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&d=identicon&r=PG" width="100%" />
    </td>
    <td>
      Blah Blah
    </td>
  </tr>
  <tr>
    <td>
      <img src="https://www.google.com/images/srpr/logo3w.png" width="100%"/>
    </td>
    <td>
      Blah Blah
    </td>
  </tr>
</table>

＆＃13;

Answer 1

~~设置max-width，max-height 和将宽度设置为auto时是否有效。它似乎适用于您的代码段。~~

编辑：版本2

这是你想要的效果吗？
你能将img移动到td的背景吗？

＆＃13;

table {
  width: 90%;
  max-width:800px;
  }

table td {
  padding:10px;
  border-bottom:solid black 2px;
  text-align:center;
  vertical-align:middle;
}
table td:first-child {
  width: 70%;
  max-width:180px;
  max-height:70px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-origin: padding-box;
  }

＆＃13;

<table>
  <tr>
    <td style="background-image: url(http://goo.gl/QrKCc);">
    </td>
    <td>
      Blah Blah
    </td>
  </tr>
  <tr>
    <td style="background-image: url(http://goo.gl/QrKCc);">
    </td>
    <td>
      Blah Blah<br />
      A forced second line to increase the height
    </td>
  </tr>
  <tr>
    <td style="background-image: url(https://www.google.com/images/srpr/logo3w.png)"> 
    </td>
    <td>
      Blah Blah
    </td>
  </tr>
</table>

＆＃13;

表格单元格中的IMG，强制最大尺寸但保持纵横比和响应性

1 个答案: