html – Distorting images on Safari.

On my site I am developing, I am having a problem when all my pictures are being distorted when I open the page in safari. Chrome They work great. Also not sure why images get corrupted when I resize on any browser.

Also, my intention was to make the images on the homepage links, however when I link to them they are very strange format and do not work.

Here are the links to the sites: Homepage with links: https://www.ryanstewsart.com/worklinks.html How I like the homepage: https://www.ryanstewsart.com/work2.html Project with images only Page (and some text): https://www.ryanstewsart.com/cassette2.html

HTML with 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="https://stackoverflow.com/questions/69920670/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="https://stackoverflow.com/questions/69920670/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="https://stackoverflow.com/questions/69920670/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>

Write a Comment

Your email address will not be published. Required fields are marked *