Heights with Images

[jflores353]

I'm having issues with height classes being applied to images, not working properly in Safari. The widths are working fine. No problems with Chrome. When I set an id to an img and style the height and width in CSS then it seems to work. The logo on the top left of the Banner bg image is incredibly large on Safari as well as another photo towards the bottom of the page. Any advice on what I could adjust would be greatly appreciated. Also, used CRA to initialize this project btw.
Thank you

https://conmimadre.netlify.app/
https://github.com/jflores353/con-mi-madre/blob/main/src/Components/Pages/Landing.js

[simonswiss]

Hey @jflores353!

I had a look, and can confirm the issue with Safari. Not quite sure why you are adding flex containers around the images though?

If you take the code for the image of the student graduation photo:

<div class="h-60 w-1/3 flex justify-center">
  <img id="grad" src="/static/media/GirlGrad.bfba2ed6.jpg" alt="Female graduate">
</div>

and remove the flex justify-center classes:

<div class="h-60 w-1/3">
  <img id="grad" src="/static/media/GirlGrad.bfba2ed6.jpg" alt="Female graduate">
</div>

... the image will display properly in Safari.

Do you do that in case the image is smaller than the container, and you want it to be center aligned?

If you need to keep the flex classes, you can add class="w-full h-full" to the image, which will also make it work.

Same deal goes with the logo 👍

Hope it helps.