Cannot resize an image in the Google page project


#1

No matter what I do, the image I’m using for the “apps” will not resize. Has anyone got any clue what I’m missing?

How do I copy/paste html and css on these forums?

Untitled2


#2

Someone answered on Reddit.

By giving the img itself a class or an ID, you can then resize it. I thought you could give the container a size and then tell the picture to fit the container, but for reasons I don’t know yet, this wasn’t working.

Cheers!


#3

You may use codepen or jsfiddle and just post the link here. I suspect it’s not resizing because your img is using max-height and header’s height is fixed. So even if you resize your browser but if the height isn’t changing, your img won’t resize.

try this:

img {width: 100%; max-width: yourImgActualSize;}

#4

Hi, thanks for the reply!

Yeah when I gave a width to the image it resized it, but I’m still confused about the height thing.

If my header is 30 px high, and my original is 300. Can’t I tell my image (inside the header) to be 100% and then it’ll be the tallest it can be, or in this case 30px? Or am I misunderstanding what the % does in the case. Is it 100% of the original size?


#5

Yes,you can. If you use height: 100% only. This will ignore the container’s height and use its own.