Question

我想将图像放到我的表格单元格而不调整大小但是裁剪溢出部分。现在我只调整了最大化图像或仅通过水平

裁剪

需要：

GOT：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>title</title>
  	<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
  	<style>
  	
  		.tablemap {
			table-layout:fixed;
  		}

		tr {			
		}  	
		
		td {
		 
		}	
  		.pixelblock {
  			padding: 1px;
  			width: 60px;
  			height: 60px;
  			max-width: 60px;
  			max-height: 60px;
  			background-color: lightgrey;
  			overflow: hidden;  			
  		}
  		
  		.pixelblockimage {
  			min-width: 100%;
  			min-height: 100%;			
  			overflow: hidden;
		    white-space: nowrap;
		    text-overflow: ellipsis;
  		}
  		
  	</style>
  </head>
  <body>
  	<table class="tablemap">  		
  		<tr>
  			<td class="pixelblock">
  				<img class="pixelblockimage" src="https://www.destinationweddings.com/Portals/0/PropertyAgent/446/Images/27082.jpg" />  				
  			</td>
		</tr>
  		<!--%TABLE%-->
  	</table>
  </body>
</html>

Answer 1

使用background-image代替这样的简单图片：

.tablemap {
  table-layout: fixed;
}


.pixelblock {
  padding: 1px;
  width: 120px;
  height: 120px;
  background-color: lightgrey;
  overflow: hidden;
  background-repeat:no-repeat;
}

<table class="tablemap">
  <tr>
    <td class="pixelblock" style="background-image:url(https://www.destinationweddings.com/Portals/0/PropertyAgent/446/Images/27082.jpg)">
    </td>
  </tr>
  <!--%TABLE%-->
</table>

或者使图像absolute位置并且不要忘记td的相对位置：

.tablemap {
  table-layout: fixed;
}

.pixelblock {
  padding: 1px;
  width: 120px;
  height: 120px;
  background-color: lightgrey;
  overflow: hidden;
  position:relative;
}

.pixelblockimage {
  position:absolute;
  top:0;
}

<table class="tablemap">
  <tr>
    <td class="pixelblock">
      <img class="pixelblockimage" src="https://www.destinationweddings.com/Portals/0/PropertyAgent/446/Images/27082.jpg" />
    </td>
  </tr>
  <!--%TABLE%-->
</table>

将图像填充到表格单元格中，而不会调整大小和溢出

1 个答案: