CODEWITHSUNDEEP
htmlcssimagehtml-tablecrop
random user
random user

Reputation: 37

Fill image into table cell without resizing and overflowing

I want to put image to my table cell without resizing but cropping overflow part. Now I've got only resized image as maximum or cropped only by horizontal

Want:

Got:

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>

Upvotes: 2

Views: 914

Answers (1)

Temani Afif
Temani Afif

Reputation: 272742

Use background-image instead of simple image like this :

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

Or make the image absolute position and don't forget the relative position for the 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>

Upvotes: 3

Related Questions