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:
img {max-width:100%}