Auto space top and bottom image in css năm 2024

Cropping is the process of removing certain regions of an image and reducing image size accordingly. It can be used to focus on specific elements in an image, remove extraneous details, or reframe the subject to attract attention to a specific part of an image.

You can crop images using plain HTML5 and CSS code, without using JavaScript or any other scripting language. We’ll show several techniques for achieving this, most of which take advantage of CSS properties like width, height, overflow, object-fit, object-position, and padding-top. Another option is to use Cloudinary to automatically crop images with smart detection of relevant objects in the image.

In this article:

What Are the Benefits of Cropping an Image?

Concentrate On A Subject

Cropping an image enables you to zoom in or out on a subject. You can use this technique to engage a subject and increase the photo’s magnification. As a result, you shift the focus to the subject.

Remove Too Much Visual Information

Too much visual information can create a distracting effect. Instead of attracting the subject’s attention, it distracts, and as a result, the viewer ignores the image. Cropping images can help you shift the focus to the main topic, remove unnecessary information and inappropriate positions, and prevent random objects from interfering with the frame.

Cropping for Composition

You can use image cropping techniques for image composition. For example, you can split the image into 3×3 grids, align elements on the grid lines, and crop according to the Rule of Thirds. In portraits, you can match the eyes to the grid lines, and in other images, you can shift the focus to the main theme.

Unusual Shapes

Ideally, users should view a web page while following messages and call to action (CTAs) prompts. They should not stop to analyze the design. Unusual shapes, like diamonds and stars, can make viewers pause to consider the reason behind the shape, shifting their focus from the message to the design. You can crop these shapes into a circle or any shape that keeps your audience engaged with the message.

Crop Using Width, Height, and Overflow CSS Properties

In addition to the well-known width and height properties, CSS containers have an overflow property you can use to crop images.

To enable the overflow property, wrap the image in a

div

element with a specified width and height, and set overflow to hidden. This ensures that the container keeps its structure, and that overflow of images included in the container will be hidden behind it.

To define the crop region, use the margins property. This attribute has four values, but you only need to fill in the first and last, because they represent the top and left pixel position.

The following code shows how to crop an image of width 300px and height 300px to a square half the size.

src=”https://example.com/myimage.png”>

.cropped { width: 150px; height: 150px; overflow: hidden; } .cropped img { margin: -150px 0px 0px -150px; }

Crop Using object-fit and object-position

The object-fit CSS property is also useful for cropping images. It has 5 possible values—the cover value is the most useful for cropping. This maintains the aspect ratio of the image, ensuring it fits the dimensions of the content box.

You can use the object-fit property in conjunction with object-position to adjust the area of the image to crop. The object-position property requires two values: x% and y% to position the image (the default position is 50% 50%).

The code below uses the class cropped-ofp to crop an original image of 300px by 300px to half its original size, and positions it in the bottom left quadrant with object-position equal to 25% 25%.

src="https://example.com/myimage.png"> .cropped-ofp { width: 150px; height: 150px; object-fit: cover; object-position: 25% 25%; } Other object-fit values

For your reference, here are other options you can use for object-fit, which can also be used to crop images:

• contain—scales the image to fit the container while maintaining its aspect ratio. Typically the image will not fill the container, unless its aspect ratio is identical to the container’s.
• fill—resizes the image to fit the container. If the aspect ratio of the image is different from that of the container, the image is stretched or squeezed to fit.
• none—displays the image in the container without resizing it.
• scale-down—works similar to none or contain, but actually scales down the image, instead of just displaying it in a smaller size. This will result in a smaller file size.

Aspect Ratio Cropping with calc() and padding-top

This technique lets you crop an image to a desired aspect ratio. It requires a few steps:

• Define an image with height set to 0 and padding-top equal to the width of the container. Set position to relative. .image-box {

  position: relative;  
  width: 100%;  
  height: 0;  
  padding-top: calc(100% * (100 / 300));  
  

  }
• Now set the image width and height to 100%, and define image position as absolute with a top value of 0. .image-cropped-calc {

  position: absolute;  
  top: 0;  
  width: 100%;  
  height: 100%;  
  object-fit: cover;  
  

  }
• You can now specify any aspect ratio to crop the image, by setting the padding-top value of the container using the calc() function.

Crop Using CSS Transforms

The CSS transform property lets you perform several image operations on an element, including rotate, scale, skew, and translate (reposition the element in the grid).

You can use the transform property to crop images by combining the scale and translate operations. Here is an example:

.image-cropped-transform {

position: absolute;  
top: 0;  
width: 100%;  
height: 100%;  
object-fit: cover;  
object-position: 55%;  
transform: scale(0.5) translate(0, 5%);  

}

Crop with the clip-path() Function

The CSS clip-path() property is especially designed to show only part of an image, which is exactly what we need for cropping. The “clipped” region is displayed, while the rest of the image is hidden.

A nice thing about this property is that it lets you specify the shape and position of the crop. It uses coordinates to define points in a two-dimensional space, which you can use to create and position shapes on the image, and define the crop shape.

CSS clip-path() accepts one of the following functions as its accepted values:

• inset()—defines an inset rectangle
• circle()—defines a circle
• ellipse()—defines an ellipse shape
• path()—accepts an SVG path string, which can define an arbitrary shape
• polygon()—defines a polygon using multiple points

Here is an example showing how to use inset() to crop the image to a rectangle:

.cropped-image-clip-rectangle {

height: 100%;  
clip-path: inset(20px 50px 10px 0 round 50px);  

} Here is an example showing how to use polygon() function to crop the image to a triangle shape:

.cropped-image-clip-polygon {

height: 100%;  
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);  

}

Fully Automated Image Resize and Cropping with Cloudinary

A cloud-based service for managing images and videos, Cloudinary offers a generous free-forever subscription plan. While on that platform, you can upload your images, apply built-in effects, filters, and modifications. You can also resize images automatically, focusing on the most important elements with AI or adapt them to your website design without having to manually crop or scale them.

You can set the target dimensions of your resized image by specifying width, height, and/or the target aspect ratio as qualifiers of your resize transformation.

You can change the dimensions of an uploaded image by setting the image’s height, width, and/or aspect ratio, and Cloudinary automatically resizes or crops the image to fit into the requested size.

For example, this original image is 1200 x 1200 pixels:

Resizing the image to 200 x 200 pixels, using crop, scale, fill and pad results in the following images:

How do I set only top and bottom padding in CSS?

If you only wanted to change the top and bottom, just use the shorthand padding:30px 0px 30px; would be top, right, bottom. Inherit basically inherits only the parent element's style but in your case you can't use inherit but you can do the following for two "p" elements using class.

How do you add a space above an image in CSS?

To add space above an image, you can add margin or padding to the top of the image using CSS. You can adjust the number of pixels to increase or decrease the space above the image as needed. In this example, the margin-top property sets the top margin of an image to 20 pixels.

How do you add top spacing in CSS?

Generally, when creating documents or webpages, adding space at the top can be accomplished by changing the margin or padding for the element. For example, in HTML and CSS, you would assign the margin-top or padding-top attributes to the according elements.

How do you make an image move up and down in CSS?

to move an image up in CSS, use the margin-top property with a negative value for the image or its container to shift it upward. Positive values will move it down.