table 单元格中的 IMG,强制最大尺寸但保持宽高比和响应能力
IMG in table cell, force max-size but maintain aspect ratio and responsiveness
我有一个 table,第一个单元格中有图像,下一个单元格中有文本。该页面将在所有设备上查看,因此我需要保持响应能力(和 table)。
一切似乎都正常 - 图片居中、响应灵敏等等。但是,有些图片太高了。所以我设置了最大高度,但现在图像失去了纵横比。
如果我将宽度和高度设置为自动,我会失去响应能力,而且我找不到保持纵横比、设置最大宽度和高度并仍然保持响应能力的解决方案,有任何指示吗?
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>
我有一个 table,第一个单元格中有图像,下一个单元格中有文本。该页面将在所有设备上查看,因此我需要保持响应能力(和 table)。
一切似乎都正常 - 图片居中、响应灵敏等等。但是,有些图片太高了。所以我设置了最大高度,但现在图像失去了纵横比。
如果我将宽度和高度设置为自动,我会失去响应能力,而且我找不到保持纵横比、设置最大宽度和高度并仍然保持响应能力的解决方案,有任何指示吗?
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>