After spending countless hours researching online, I still can't figure out how to make the image responsive on mobile devices. On a computer screen, it looks fine:
https://i.sstatic.net/sCPbA.png
However, when I inspect the element and view the images, they appear squished like this:
https://i.sstatic.net/TexpL.png
The images are being resized with reduced width, which is not what I want.
I've tried using media queries to adjust the width and height, but it's not working as expected.
Here is an example of my HTML code:
<div id = "projects">
<div id = "we-cycle">
<img id = "we-cycle-image" src = "./photos/we-cycle.png" width = "100%" height = "auto">
</div>
And here is the relevant CSS code:
#projects {
width: 80%;
margin: 300px auto;
margin-left: -30px;
padding: 20px;
}
#we-cycle-image {
position: relative;
max-width: 80%;
height: auto;
}
@media screen and (max-width: 500px) {
#we-cycle-image {
width: 100%;
height: auto;
}
}