How to display image of any size in a fixed size 100x100 div?
Question
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:
3 answers
solution1
2 ACCPTED 2017-10-13 13:23:54
Use a background image instead. It's the easiest when you need an image to cover up the whole div, and not to change the aspect ratio.
element {
background-repeat:no-repeat;
background-position: center;
background-image:url(image.jpg);
background-size: cover;
}
solution2
2 2017-10-13 13:28:02
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>
solution3
2 2018-05-17 11:42:57
使用相同的宽度和高度，即比例视图为（100x100）。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.