Languages
[Edit]
EN

CSS - how to crop / clip and resize image

5 points
Created by:
Root-ssh
150590

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 

 

Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

CSS

Native Advertising
ūüöÄ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

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

Join