Photoshop Question posted in
The official user guide can be found here.

How to make centered 50px x 50px photos in a row from different resolutions (e.g 136px x 266px) – Photoshop

So I need to make 50px x 50px photos in a row. All of them have different resolutions. My question is how to scale photos down to make them 50px x 50px with centered content, just like in Photoshop where I can make a 50×50 square and move it to choose where to copy.
50×50 square:
enter image description here

ON THE LEFT: This is the original photo for example it is 136px x 266px
ON THE RIGHT: This is how photos should look like
enter image description here

Tags:

2

Answers


  1. 0

    From my knowledge this is not something possible in css because css can only resize and move the image, but cannot crop the image. The image on the right is not simply resized but is cropped to focus on the persons face and that is something css cannot do as it can’t modify the image content. You can find good free online cropping tools to resize your image or use the cropper that comes with windows 10 in settings when you view an image.

    Login or Signup to reply.
  2. 0

    Typically it would be best to crop your images in something like PhotoShop before uploading them to your website. This is due to the fact that the user will have to download the photos, and smaller dimensions for a photo means a smaller filesize (and thus a quicker download for your user).

    If you have to crop the photos on the website itself, you can use the clip property in conjunction with position: absolute:

    img {
  position: absolute;
  clip: rect(0px, 80px, 200px, 0px);
}
    <img src="http://placehold.it/200">

    Note that the clip property is deprecated (because you should be cropping the image beforehand), and may be removed at any time.

    Hope this helps! 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search