CODEWITHSUNDEEP
htmlcss
Ryan Stewart
Ryan Stewart

Reputation: 33

Images are being distorted on safari

On my site I am developing, I am having a problem with when I open the page in Safari all my images are being distorted. 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 when i make them links, they are formatted so weird and don't work also.

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

HTML with the images as links:

.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;
}
<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>

HTML when images are not links:

.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;
}
<div class="container">
  <img src="Images/ThumbnailSpoiler.gif" alt="spread" style="max-width:100%;height:auto;">

  <img src="Images/alyx1.jpg" alt="spread" style="max-width:100%;height:auto;">

  <img src="Images/L2.jpg" alt="spread" style="max-width:100%;height:auto;">


  <img src="Images/Asset%2029.jpg" alt="spread" style="max-width:100%;height:auto;">

  <img src="Images/TOBi/5.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/lookat-this2.gif" alt="spread" style="max-width:100%;height:auto;">

  <img src="Images/pillpopcovermock%202.jpg" alt="spread" style="max-width:100%;height:auto;">

  <img src="Images/arenamock-Recoverevd.jpg" alt="spread" style="max-width:100%;height:auto;">

  <img src="Images/ring-01.png" alt="spread" style="max-width:100%;height:auto;">

  <img src="Images/22.jpg" alt="spread" style="max-width:100%;height:auto;">
</div>

Upvotes: 0

Views: 1015

Answers (1)

Kameron
Kameron

Reputation: 10846

You can achieve that look by adding the same CSS you set for your img to the a tag.

a {
  flex: 0 0 auto;
  width: auto;
  height: 90vh;
  max-width: 100%;
  margin: 50px;
}

Upvotes: 1

Related Questions