代码之家 › 专栏 › 技术社区 › Keith Nicholas

如何使图像在表格单元格内垂直缩放?

css html

Keith Nicholas · 技术社区 · 6 年前

以下代码在页面中,随着浏览器窗口宽度的变化,上下缩放图像。但是,如果您上下更改窗口的浏览器高度,则它不会缩放图像,它似乎锁定为图像的宽度。所以如果窗口很宽,绿色部分就会从窗口底部消失

这个问题有javascript解决方案,但我想用HTML/CSS来解决。

      <style>
    .red {
      background-color: red;
    }
    .green {
      background-color: green;
    }

    table {
      height: 100vh;
      table-layout: fixed;
    }

    img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <table style="width:100%">
    <col width="100">
    <col width="100%">
    <col width="100">
    <tr class="red" style="height:100px;"> <td> </td> <td> </td> <td></td> </tr>
    <tr>
      <td> </td>
      <td>
        <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" />
      </td>
      <td> </td>
    </tr>
    <tr class="green" style="height:200px;">
      <td> </td> <td> </td> <td> </td>
    </tr>
  </table>

</body>

这是压缩后的宽度,图像缩小。。。

4 回复 | 直到 6 年前

Hovhannes Sargsyan 6 年前

也许这些编辑会有用,玩吧。

    .red {
      background-color: red;
    }
    .green {
      background-color: green;
    }

    table {
      height: 100vh;
      table-layout: fixed;
    }

    img {
      width: 100%;
      height: 100%;
    }
    
    .image{
position: relative;
padding-top: 30vh;

    }
    
    .image img{
      	position: absolute;
	top: 0;
	height: auto;
	max-height: 100%;
	width: auto;
	max-width: 100%;
	right: 0;
	margin: auto;
	left: 0;
    }

 <table style="width:100%">
    <col width="100">
    <col width="100%">
    <col width="100">
    <tr class="red" style="height:100px;"> <td> </td> <td> </td> <td></td> </tr>
    <tr>
      <td> </td>
      <td class="image">
        <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" />
      </td>
      <td> </td>
    </tr>
    <tr class="green" style="height:200px;">
      <td> </td> <td> </td> <td> </td>
    </tr>
  </table>

Saravana 6 年前

我设定 max-height 使您的图像在所有设备中都可见底部的绿色区域。所以你可以调整它的大小。你可以调整 最大高度 根据你的要求。我希望这个解决方案能帮助你。

 .red {
     background-color: red;
 }
 
 .green {
     background-color: green;
 }
 
 table {
     height: 100vh;
     table-layout: fixed;
 }
 
 img {
     width: 100%;
     height: 100%;
     max-height: 450px;
     object-fit: contain;
 }

<table style="width:100%">
    <colgroup>
        <col width="100">
            <col width="100%">
                <col width="100">
    </colgroup>
    <tr class="red" style="height:100px;">
        <td> </td>
        <td> </td>
        <td></td>
    </tr>
    <tr>
        <td> </td>
        <td>
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" />
        </td>
        <td> </td>
    </tr>
    <tr class="green" style="height:200px;">
        <td> </td>
        <td> </td>
        <td> </td>
    </tr>
</table>

zer00ne 6 年前

<col> 宽度为100px,100%,100px,大于200px。中间的列是一个非指定的宽度,因此它会占用左、右固定列不占用的任何空间。
第一行的高度是100px,最后一行是200px。中间一行的高度占据了剩余的垂直空间。 Special pseudo-classes td (不是 tr ). tr公司 td公司 还有10% table
```
 tr:first-of-type td:first-of-type

 tr:last-of-type td:last-of-type 
```
<html> 和 <body> 设置为100%x 100% position:relative 所以 <table> 分配给 position:absolute 在视窗内端坐。
colspan='3' 图像现在是背景图像。稍加改动,图像就可以扩展并填充整行,而不会溢出或进一步移动其他行。设置 background-size cover 从 contain .

html,
body {
  height: 100%;
  width: 100%;
  position:relative;
  overflow:hidden;
}

* {
  margin:0;
  padding:0;
}
.red {
  background-color: red;
}

.green {
  background-color: green;
}

table {
  height: 100%;
  width:100%;
  table-layout: fixed;
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  right:0;
}

tr:nth-of-type(2) td {background:url("https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" )no-repeat; background-size:contain;background-position:center center;}

tr:first-of-type td:first-of-type {
  min-height: 100px;
}

tr:last-of-type td:last-of-type {
  min-height: 200px
}

<table style="width:100%">
    <col width="100">
    <col>
    <col width="100">
    <tr class="red">
      <td height='100'> </td> <td>
      </td><td></td>
    </tr>
    <tr>
      <td colspan='3'> </td>
    </tr>
    <tr class="green">
      <td height='200'> </td>
      <td></td>
      <td> </td>
    </tr>
  </table>

Elif 6 年前

这样地?

https://jsfiddle.net/xhc6ovzL/

 <table style="width:100%">
<col width="100">
<col width="100%">
<col width="100">
<tr class="red" style="height:100px;"> <td> </td> <td> </td> <td></td> </tr>
<tr>

  <td colspan="3">
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png" />
  </td>
  <td> </td>
</tr>
<tr class="green" style="height:200px;">
  <td> </td> <td> </td> <td> </td>
</tr>