What is the name of the technique used to do a proportional resizing of img . for example I have an image of 200x400 and want to show it in a 150x150 square how do I resize that image while maintaining the aspect ratio?
How would you like it to be
You can only do this with CSS using max-width and max-height . To center the image I used flex .
See two examples with images in different proportions:
.teste, .teste2{
width: 150px;
height: 150px;
background: #ddd;
display: flex;
align-items: center;
justify-content: center;
}
.teste img, .teste2 img{
max-width: 100%;
max-height: 100%;
}Imagem de 200x400:
<br>
<div class="teste">
<img src="http://www.narutopedia.ru/w/images/d/de/Unkai2Anime.jpg"/></div><br>Imagemde630x354:<br><divclass="teste2">
<img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" />
</div>