ryanstewsart
New Coder
Hello,
On my site I am developing, I am having a problem with when I open the page in Safari all my images are being squished. Chrome they work great.
Also not sure why when I resize on any browser, the images get squished.
Also, my intention was to make the images on the homepage links, however they are formatted so weird and don't work as links.
Links to the sites are here:
Homepage with links: https://www.ryanstewsart.com/worklinks.html
How I want the homepage: https://www.ryanstewsart.com/work2.html
Project Page with only images (and some text): https://www.ryanstewsart.com/cassette2.html
On my site I am developing, I am having a problem with when I open the page in Safari all my images are being squished. Chrome they work great.
Also not sure why when I resize on any browser, the images get squished.
Also, my intention was to make the images on the homepage links, however they are formatted so weird and don't work as links.
Links to the sites are here:
Homepage with links: https://www.ryanstewsart.com/worklinks.html
How I want the homepage: https://www.ryanstewsart.com/work2.html
HTML:
<div class="container">
<a href="beansans.html"><img src="Images/Asset%2029.jpg" alt="Bean Sans" style="max-width:100%;height:auto;"></a>
<a href="lentrata.html"><img src="Images/L2.jpg" alt="L'Entrata" style="max-width:100%;height:auto;"></a>
<a href="ELEMENTS.html"><img src="Images/5.png" alt="alyx" style="max-width:100%;height:auto;"></a>
<a href="nft.html"><img src="Images/opensea.png" alt="NFT Youngboy" style="max-width:100%;height:auto;"></a>
<a href="alyx.html"><img src="Images/alyx1.jpg" alt="alyx" style="max-width:100%;height:auto;"></a>
<a href="spoiler.html"><img src="Images/ThumbnailSpoiler.gif" alt="alyx" style="max-width:100%;height:auto;"></a>
<a href="cassette.html"><img src="Images/cass-02%20copy.png" alt="Cassettes" style="max-width:100%;height:auto;"></a>
<a href="lookat.html"><img src="Images/lookat-this2.gif" alt="Look at This Photograph" style="max-width:100%;height:auto;"></a>
<a href="popper.html"><img src="Images/pillpopcovermock%202.jpg" alt="Pill Popper" style="max-width:100%;height:auto;"></a>
<a href="canyon.html"><img src="Images/arenamock-Recoverevd.jpg" alt="Canyon Daze" style="max-width:100%;height:auto;"></a>
<a href="mutiny.html"><img src="Images/ring-01.png" alt="Tendencies" style="max-width:100%;height:auto;"></a>
<a href="tendencies.html"><img src="Images/22.jpg" alt="Tendencies" style="max-width:100%;height:auto;"></a>
</div>
</body>
CSS:
.container {
display: flex;
flex-wrap: no-wrap;
overflow-x: auto;
height: 90vh;
}
img {
flex: 0 0 auto;
width: auto;
height: 90vh;
max-width: 100%;
margin: 50px;
}
Code:
//Image HTML Code//
<div class="container">
<br><br><br><br><br><br><h1></h1>
<img src="Images/tws.png" alt="spread" style="max-width:100%;height:auto;">
<img src="Images/cage.png" alt="spread" style="max-width:100%;height:auto;">
<img src="Images/MODEST.png" alt="spread" style="max-width:100%;height:auto;">
<img src="Images/peep.png" alt="spread" style="max-width:100%;height:auto;">
<img src="Images/circles.png" alt="spread" style="max-width:100%;height:auto;">
<img src="Images/carti.png" alt="spread" style="max-width:100%;height:auto;">
<img src="Images/WLR.png" alt="spread" style="max-width:100%;height:auto;"><br>
<img src="Images/LLA.png" alt="spread" style="max-width:100%;height:auto;"><br>
<img src="Images/ALLA.png" alt="spread" style="max-width:100%;height:auto;"><br>
<img src="Images/Rodeo.png" alt="spread" style="max-width:100%;height:auto;"><br>
<img src="Images/Nostalgia.png" alt="spread" style="max-width:100%;height:auto;">
<img src="Images/faces.png" alt="spread" style="max-width:100%;height:auto;">
<img src="Images/uzi.png" alt="spread" style="max-width:100%;height:auto;">
</div>
</body>