Can any image taken from any website be cropped using CSS/HTML?

If I were to take an image from google source. And I need to crop certain part of that image, can this be possible with CSS ?

Good question! And I will say yes, you can adjust the image on your page in some ways, you can find examples in this article:

In other words, you can’t crop the image on the server, but you can manage it’s position and appearance on your page

1 Like

The object-fit property in CSS allows you to control how an <img> or <video> element should behave when its dimensions do not match the aspect ratio of its content box. It specifies how the content of the replaced element (such as an image or video) is resized to fit its container box.

There are several values you can use for the object-fit property:

  1. fill: This is the default value. The replaced content is stretched to fill the content box, potentially distorting the aspect ratio.

  2. contain: The replaced content is scaled to maintain its aspect ratio while fitting within the content box. It may be smaller than the content box if the aspect ratio of the content box differs from that of the replaced content.

  3. cover: The replaced content is scaled to maintain its aspect ratio while completely covering the content box. This may result in part of the content being clipped if the aspect ratio of the content box differs from that of the replaced content.

  4. none: The replaced content is not resized. It retains its intrinsic dimensions, and may overflow the content box.

  5. scale-down: The replaced content is scaled to maintain its aspect ratio, but it will not be enlarged beyond its original size if it would otherwise overflow the content box.

Here’s an example of how you might use object-fit:

img {
  width: 200px; /* Adjust width and height to desired size */
  height: 200px;
  object-fit: cover; /* Crop and cover the container with the image */
}

In this example, the image will be resized to fit a 200px by 200px container while maintaining its aspect ratio, and any overflow will be cropped according to the object-fit property value (cover in this case).

1 Like

In CSS, the object-fit property does not actually crop the image itself; rather, it controls how the image is fitted into its container. It specifies how the replaced content (such as an image or video) is resized and positioned within its container.

When you use the object-fit property with a value like cover or contain, it may appear as if the image is cropped because the overflow of the image outside its container is hidden. However, the actual image data remains intact, and it is the container that dictates how much of the image is visible.

So, to rephrase: object-fit does not crop the image itself but rather controls how the image is displayed within its container, which may result in the appearance of cropping.

1 Like