Hello friends,
Perhaps in your code journey, there are many times when there is a problem of image distortion due to hard fixing the width and height of the image, right? Or even if you set the value for a property weigth or height and the other property is to auto, sometimes the image will not be displayed very well. From there, it will lead to the improper intention of uploading the image. Therefore, in this article I would like to introduce you to 1 css attribute that can solve the image alignment problem for you, that is object-fit .
object-fit is an attribute that helps the user to resize the <image> or <video> to fit the existing frame. object-fit has the following values:
- fill : This is the default value. The image will now be resized so that it can fill the element containing it as much as possible. If necessary, the image is stretched or reduced to fit.
- contain : The image remains scaled but resized to fit the given size.
- cover : The image retains its aspect ratio and fills the given size. The image will be clipped to fit the frame of the element containing it.
- none : the image does not resize
- scale-down : The image is scaled to the smallest version of none or contain .
In this article, I focus on the two most commonly used values: cover and contain .
object-fit: cover
As I explained above. When using object-fit: cover , the image will remain scaled and will be clipped to fit the frame of the element containing it. You can see the example below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div class="media"> <h2>No object-fit</h2> <div class="none object"> <img src="paris.jpg" alt="Paris" style="width: 350px; height: auto"> </div> </div> <div class="media"> <h2>object-fit: cover</h2> <div class="cover object"> <img class="contain" src="paris.jpg" alt="Paris" style="width: 350px; height: 350px"> </div> </div> |
Explain a little bit with the above code: I have 1 image. One side only sets the value for the width and height: auto, the other side fixes the value for both 2. For now, I will use css as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .media { display: inline-block; margin: 30px; } .object { background: #E6E6FA; border: 4px double green; width: 350px; height: 350px; } img {display: block;} .cover {object-fit: cover;} |
And the displayed result will be like this:
As you can see, a part of the image on the object-fit: cover part has been trimmed to fit the frame of the element containing it.
object-fit: contain
Contrary to object-fit: cover , object-fit: contain will resize the image so that the image is fully visible in the frame. Actually there are a lot of customers who want to display images in this way. Thus, they do not need to worry about cutting the image to the right ratio, they just need to choose a beautiful, pleasant image to upload. I have 1 code snippet as follows:
1 2 3 4 5 6 7 8 9 10 | <h2>object-fit: contain</h2> <div class="media"> <img src="pic_trulli.jpg" alt="Trulli" width="500" height="333"> </div> <div class="media"> <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> </div> |
The above HTML snippet uses 2 images with different sizes:
- Photo 1: width> height
- Photo 2: height> width
So we can see the most intuitive way. And use css like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .media { background: #E6E6FA; border: 4px double green; margin: 30px; width: 350px; height: 350px; display: inline-block; } .media img{ width: 100%; height: 100%; object-fit: contain; } |
The displayed result will be like this.
Looks pretty eye-catching, right?
object-position
The object-position property is used in conjunction with object-fit to specify a position for <img> or <video> with the x / y coordinate inside the content box.
For example, with the above HTML, if we do not add object-position, the image will be centered horizontally and vertically by default. So if you add object-position, how will it display?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .media { background: #E6E6FA; border: 4px double green; margin: 30px; width: 350px; height: 350px; display: inline-block; } .media img{ width: 100%; height: 100%; object-fit: contain; object-position: 5px 10%; } |
And at this point it should display the following:
Just as simple as that. In fact, this attribute is quite rarely used because almost everyone wants the middle image to be the best.
So, through this article, you can add yourself a way to align the image so that it looks beautiful. Good luck!