我有一个表格,第一个单元格中包含图片,第二个单元格中包含文字。该页面将在所有设备上查看,因此我需要保持响应能力(和表格)。

一切似乎都可以正常工作-图像居中,反应灵敏等。但是,有些图像太高了。所以我设置了最大高度,但是现在图像失去了纵横比。

如果将width和height设置为auto,我会失去响应能力,并且找不到保持纵横比,设置max width和height并仍保持响应能力的解决方案,是否有指针?



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

<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>

最佳答案

设置最大宽度,最大高度并将宽度设置为自动时,它是否起作用?它似乎在您的代码段中有效。

编辑:版本2


这是您想要的效果吗?
您可以将img移至td的背景吗?




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

<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>

关于css - 表格单元格中的IMG,强制最大大小,但保持长宽比和响应度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33638712/

10-13 02:13
查看更多