Menu
I want to display image of any size (different width and height) in a fixed size (100px by 100px) div without changing its aspect ratio. I also want to align the image to the center inside the div. I worked on it but image with different width and height (6th) is not coming in center unless I change its aspect ratio.
<html>
<style>
.A{
border:1px dotted black;
display:inline-block;
}
.B{
border:1px solid black;
display:inline-block;
width: 100px;
height:100px;
overflow:hidden;
}
.C{
border:1px solid black;
display:inline-block;
width: 100px;
height:100px;
overflow:hidden;
}
</style>
1
<div class="A">
<img src="man-profile.png">
</div>
2
<div class="B">
<img src="man-profile.png">
</div>
3
<div class="B">
<img src="man-profile.png" style="width:100;">
</div>
4
<div class="C">
<img src="picture.png" style="width:100;">
</div>
5
<div class="C">
<img src="picture.png" style="height:100;">
</div>
6
<div class="C">
<img src="picture.png" style="height:100; width:100%">
</div>
</html>
Picture attached below:
973
To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container.
One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels. For example, the original image is 640×960.
Set the image's width to 100%, and the image's height will adjust itself: <img style="width:100%;" id="image" src="...">
Use max-width and max-height to the img tag in CSS.
img {
display: block;
max-width:180px;
max-height:180px;
width: auto;
height: auto;
}<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">The original size of the image is 400x400 pixels, but you can resize it by CSS without any changes in aspect ratio. <img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
Another option:
If you want to add parent div to the image then you can do it something like this:
.container {
width: 100px;
}
.container img {
display: block;
width: 100%;
height: auto;
}<div class="container">
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
