How Can I Resize and Crop Images Using Only CSS?

Using CSS to Resize and Crop an Image

In this article, we will explore how to resize and crop an image using CSS. This technique allows you to display an image with a specific width and height, even if the original image has a different aspect ratio.

Resizing and Cropping an Image

To resize and crop an image, you can use a combination of the img and background-image properties. The img property allows you to resize the image while maintaining its aspect ratio. The background-image property allows you to crop the image to the desired size.

Example

Consider the following example:

This image has a size of 800x600 pixels. We want to display it as an image of 200x100 pixels.

Step 1: Resizing the Image

<br><img</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">style="width: 200px; height: 150px;" 
src="https://i.sstatic.net/wPh0S.jpg"></p>
<p>

This step resizes the image to 200x150 pixels, maintaining its aspect ratio.

Step 2: Cropping the Image

<br><div</p><pre class="brush:php;toolbar:false">style="background-image:
       url('https://i.sstatic.net/wPh0S.jpg'); 
width:200px; 
height:100px; 
background-position:center;">&amp;nbsp;</div></p>
<p>

This step crops the resized image to 200x100 pixels.

Combined Approach

You can combine both these techniques to achieve the desired result. For example, the following code:

</p>
<pre class="brush:php;toolbar:false">.crop {
    width: 200px;
    height: 150px;
    overflow: hidden;
}

.crop img {
    width: 400px;
    height: 300px;
    margin: -75px 0 0 -100px;
}

<div>

Copy after login

This code will resize the image to 200x150 pixels and then crop it to 200x100 pixels.

The above is the detailed content of How Can I Resize and Crop Images Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!