Question

我有一个包含9个td的表，每个td应包含不同的图像。

所以我有：

<td>
  <img src="pics/LLTR.jpg" class="lltr"></img>
</td>

和css类

.lltr:hover{
    opacity: 0.8;
}

.lltr{
    max-height:auto;
    max-width:100%;
    opacity: 0;
    -webkit-transition: opacity 1s; /* Safari */
    transition: opacity 1s;
}

这是当前版本。我已经尝试过它作为背景图像和许多其他东西都没有正常工作。图像显然以td的宽度和自动高度显示，这导致td在高度上扩展，即使表格布局已设置为固定。

有没有办法按比例缩放图像宽度而不会延迟任何“剩余”高度，就像背景图像的封面属性一样？

THX， RAWK

表格的整个代码：

<table id="maintab">
        <tr>
            <td class="isFixed">1</td>
            <td class="isFixed">2
            </td>
            <td class="isFixed">3</td>
        </tr>
        <tr>
            <td class="isLinked">
                <img src="pics/LLTR.jpg" class="lltr"></img>
            </td>
            <td class="isLinked">5</td>
            <td class="isLinked">6</td>
        </tr>
        <tr>
            <td class="isLinked">7</td>
            <td class="isLinked">8</td>
            <td class="isLinked">9</td>
        </tr>
    </table>

CSS部分：

#maintab{
    width:100vw;
    height:100vh;
    border-collapse: separate;
    border-spacing: 20px;
    margin:0;
    padding:0;
    text-align:center;
    vertical-align:middle;
    table-layout:fixed;
}

.lltr:hover{
    opacity: 0.8;
}

.lltr{
    max-height:auto;
    max-width:100%;
         /*background-image: url('pics/LLTR.jpg');
         background-size:cover;*/
    opacity: 0;
    -webkit-transition: opacity 1s; /* Safari */
    transition: opacity 1s;
}

.isLinked{

}

.isLinked:hover{
    background-color:rgba(240,240,240,0.75);cursor:pointer;
}

.isFixed{
    background-color:rgba(197,197,197,0.6);
}

Answer 1

这是一个可能有用的概念验证。

我设置了表格单元格的高度和宽度（在我的例子中，是一个2x2网格），然后在每个表格单元格中，我将div与overflow: hidden放在一起。

然后我将图像的宽度设置为100％，任何多余的高度都将是由div元素剪切。

我认为图像是肖像类型。在某些情况下，足够大屏幕，表格中可能有足够的空间来显示整个图像。

＆＃13;

table {
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: collapse;
}
td {
  height: 50vh;
  width: 50vw;
  padding: 0;
}
td div {
  border: 1px dotted gray;
  height: inherit;
  width: inherit;
  overflow: hidden;
  box-sizing: border-box;
}
td div img {
  width: 100%;
}
body {
  margin: 0;
}

＆＃13;

<table cell-spacing=0>
  <tr>
    <td><div>one</div></td>
    <td><div>three</div></td>
  </tr>
  <tr>
    <td><div>two</div></td>
    <td><div><img src="http://lorempixel.com/400/600/nature"></div></td>
  </tr>
</table>

＆＃13;

缩放td标签内的图像？

1 个答案: