image resizing proportionally

Asked

Viewed 680 times

1

what is the name of the technique used to resize img proportional. for example I have a 200x400 image and I want to show it in a 150x150 square how do I resize this image while maintaining the ratio?

how I’d like you to stay

inserir a descrição da imagem aqui

php jquery

  • Responsive?!?!?!

  • yes, for example it will resize the img as the order size 150x150 and what is left of these 150x150 she will stick with the black background

  • You can check whether it is Portrait or Landscape and so choose whether it will resize by width or height and center it. If it is more vertical it will be with the stripes on the sides and if it is more horizontal they will be at the top and at the base

  • has some tutorial explaining right how to do this. I have no idea how to do this check whether the img is more vertical or horizontal

  • I’ll edit the answer with the photo of how I’d like it to look

  • @srBubbles if you want to redirect with PHP, you have this library that can assist you. https://github.com/gumlet/php-image-resize . So you will have an image in the correct size and the client will not need to download a large image to be redirected to a much smaller size.

Show 1 more comment

1 answer

1


You can do this only 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>
Imagem de 630x354:
<br>
<div class="teste2">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" />
</div>

Browser other questions tagged php jquery

You are not signed in. Login or sign up in order to post.