在不调整大小和溢出的情况下将图像填充到 table 单元格中

Question

我想将图像放入我的 table 单元格而不调整大小但裁剪溢出部分。现在我只将图像调整为最大或仅按水平裁剪

想要：

得到：

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

在不调整大小和溢出的情况下将图像填充到 table 单元格中

Fill image into table cell without resizing and overflowing

html

css

html-table

image

crop