How to "Zoom In" / Crop Image in CSS While Maintaining Container Size - Build a Pokémon Search App Project

HTML-CSS
1

Good day everyone :wave: :smile:

Apologies if this post is redundant, but I couldn’t find the answer I’m looking for.

I’m working on the JS project “Build a Pokémon Search App Project”, and I’ve noticed that the Pokémon images have alot of empty space around them.

What I’m trying to do is have the image “container” remain in the same place and with same size relative to the HTML / CSS elements surrounding it, but for the content at the center of the image (the Pokémon, in this case) to appear bigger while cropping out some of the empty space that surrounds it in the original image. Here’s a visual example:

Example for fCC

The image on the left is the default Pikachu provided by the fCC API for this project. The image on the right is a version of the one on the left that I manually cropped and then uploaded to my HTML project. Both have the same size (the light blue square) but the one on the right is cropped/zoomed in. How can I automatically do this with CSS (or JavaScript?) for all the images in the project?

Thank you!

2

you probably can use something like a clip-path if you can figure out the path you want that will apply to all images

1 Like
3

You can try to crop it using an outer container with a hidden overflow.

  • Set the image width/height to its intrinsic size in px

  • Put the image inside a flex container and align the image to the center.

  • Hide the overflow on the container and set its width/height to half of the image size (or however much you need to crop).

1 Like
4

This would resolve my issue wonderfully, but for some reason, when I add flexbox to the div in which my image is contained, the image shrinks to the size of the div, even if it was set to a width greater than 100%. This only happens when I add

display: flex;

to the CSS of the container div.

The following code:

HTML:

<div id="inner-image-div-1"> 
    <img class="pokemon-images" id="front-default" src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png">
</div>

CSS:

#inner-image-div-1 {
  background-color: lightgrey;
  border: 1px solid black;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}

.pokemon-images {
  width: 200%;
}

produces this (I’m working on the one on the left, right now):

Pre-Flex

Adding

display: flex;

to the CSS of #inner-image-div-1 changes it to this:

Post-Flex

Why does this happen, and how can I center my image within the div containing it while still letting it be bigger than that div?

5

Try following all the instructions given. That is:
1- make the display of the container flex and assign intrinsic width and height to the image
2- align it to center (using the justify-content: center should work and the align-items: center)
3- hide overflow on container
4- set container width and height to half of the image size

Ps. Or use a clip-path as I suggested and then scale the image to whatever size works.

6

Adding pixel values to the image causes further problems, as it causes the div containing the image, as well as the div containing that div, to increase in size, and since the outer div is part of a grid, the other grid items increase proportionally in size as well.

As for clip-path, it produced the same problem, wherein I have to increase the size of the image before clipping it in order to achieve the zoomed-in look I’m aiming for, and then attempting to center it with flexbox causes the size increase to magically disappear.

7

I should note, however, that I’ve realized that what I’m trying to do is not a good idea in the first place (at least in this case). This is because there are some Pokémon that are much bigger, and therefore have very little empty space around them, and cropping these like I’m trying to do would just cut out parts of the actual Pokémon.

8

I actually did this project last month and i ended up using a round clip-path around the middle of each Pokémon if I recall.

9

Yes the img px values will do that but the overflow hidden will hide that provided everything has a fixed value. It takes some finessing to get it right.

10

Fair enough. Because of what I mentioned above, however, I’m going to take things in a different direction instead of cropping stuff. Thanks alot! :v: :smile:

1 Like