Languages
[Edit]
EN

CSS - how to crop / clip and resize image

5 points
Created by:
Root-ssh
68810

Using CSS it is possible to crop and resize image in few ways.

1. clip: rect() property example

Most important things about this approach are:

  • it uses clip: rect() style property to hide (like visibility: hidden for part of element) unwanted part of image,
  • after clipping it is necessary to correct position of clipped element,
  • clip property works with position:¬†absolute and¬†position:¬†fixed properties, so it is necessary to use¬†too,
  • image resize effect is achived with¬†width:¬†100px¬†and heigh:¬†100px¬†properties,
  • clip: rect() property workd for other html elements too.

Main concept of how clip property works has been described below:

clip: rect() style property explanation.
clip: rect() style property explanation.
// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    body {
    	position: relative;
       	height: 70px;
    }

    .cropped-image {
        position: absolute; /* required property for clip */
        left: -24px; /* -left_edge */
      	top:  -43px; /* -top_edge  */
        width:  100px; /* image_scaled_width  */
      	height: 100px; /* image_scaled_height */
      
        /* edges:  top_edge,   right_edge,  bottom_edge, left_edge */
        clip: rect(43px,       95px,        95px,        24px);
    }

  </style>
</head>
<body>
  <img class="cropped-image" 
       src="//dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
</body>
</html>

2. Element with rescaled content examples

This examples show how to achive same clipping effect to above example, but using overflow: hidden style property.

2.1. With shifted margin and background resising

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    .crop-container {
    	border: 1px solid black;
	    width: 71px;  /* 95px - 24px (right_edge  - left_edge) */
      	height: 52px; /* 95px - 43px (bottom_edge - top_edge ) */
      	overflow: hidden;
    }

    .cropped-image {
        /*      -left_edge      -top_edge */
      	margin: -43px      0 0  -24px;
        width:  100px; /* image_scaled_width  */
      	height: 100px; /* image_scaled_height */
      	background: url('//dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png')
                    /*              image_scaled_width  image_scaled_height */
                    no-repeat 0  /  100px               100px; 
    }

  </style>
</head>
<body>
  <div class="crop-container">
    <div class="cropped-image" />
  </div>
</body>
</html>

2.2. With shifter margin and img element resizing

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    .crop-container {
    	border: 1px solid black;
	    width: 71px;  /* 95px - 24px (right_edge  - left_edge) */
      	height: 52px; /* 95px - 43px (bottom_edge - top_edge ) */
      	overflow: hidden;
    }

    .cropped-image {
        /*      -left_edge      -top_edge */
      	margin: -43px      0 0  -24px;
        width:  100px; /* image_scaled_width  */
      	height: 100px; /* image_scaled_height */
    }

  </style>
</head>
<body>
  <div class="crop-container">
    <img class="cropped-image" 
         src="//dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
  </div>
</body>
</html>

2.3. With shifted position and background resising

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    .crop-container {
    	position: relative;
      	border: 1px solid black;
	    width: 71px;  /* 95px - 24px (right_edge  - left_edge) */
      	height: 52px; /* 95px - 43px (bottom_edge - top_edge ) */
      	overflow: hidden;
    }

    .cropped-image {
        position: absolute;
      	left: -24px; /* -left_edge */
        top:  -43px; /* -top_edge  */
        width:  100px; /* image_scaled_width  */
      	height: 100px; /* image_scaled_height */
      	background: url('//dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png')
                    /*              image_scaled_width  image_scaled_height */
                    no-repeat 0  /  100px               100px; 
    }

  </style>
</head>
<body>
  <div class="crop-container">
    <div class="cropped-image" />
  </div>
</body>
</html>

2.3. With shifted position and img element resizing

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    .crop-container {
    	position: relative;
      	border: 1px solid black;
	    width: 71px;  /* 95px - 24px (right_edge  - left_edge) */
      	height: 52px; /* 95px - 43px (bottom_edge - top_edge ) */
      	overflow: hidden;
    }

    .cropped-image {
        position: absolute;
      	left: -24px; /* -left_edge */
        top:  -43px; /* -top_edge  */
        width:  100px; /* image_scaled_width  */
      	height: 100px; /* image_scaled_height */
    }

  </style>
</head>
<body>
  <div class="crop-container">
    <img class="cropped-image" 
         src="//dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
  </div>
</body>
</html>

Used resources:

Image used with cropping examples.
Image used with cropping examples.

See also

  1. CSS - clip: rect() style property example

Merged questions

  1. CSS - clipping, masking and resizing image 

 

Native Advertising
50 000 ad impressions - 449$
ūüöÄ
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

‚̧ԳŹūüíĽ ūüôā

Join