Image appearing lengthened on certain touch devices

Hello,

Here is the website I am currently working on:
https://webflow.com/design/draft-4?preview=f4216371f0cfc921806022e72ad52bbf

I am currently working on the home page, also known as the portfolio thumbnails page.

The idea is that as you hover over the thumbnail boxes, the thumbnail/image will appear. This is how it is structured.

  • I have one square div that only contains absolutely-positioned text (project name, type, year). The width is a certain percentage, and the padding is the same percentage (this is to maintain the square ratio).
  • Then within that div is an “overlay div” that is also absolutely positioned but hidden until the initial div is clicked on/hovered upon
  • this overlay div is set to 100% width and 100% height, border of 6px
  • within this overlay div is a link (a plus sign that is linked to the actual page with project images/description) and an image
  • I gave the image a class of ProjectImages. I set the width and height to 100%. All images are
    squares. If I set the height to AUTO, there is a small white border on the bottom of the image.

Everything looks good and works fine on desktop and iOs phone devices (iphone 5 and iphone 6). But the images are super stretched length wise on iPads and Android phone devices. I have attached a screenshot to show you what I mean. If i set the height to auto, the problem if fixed but there is a small white tap on the bottom of the.

See comparison below. In the first screenshot, the images are set to width of 100% and height of auto. In the second screen shot, the width and height are both 100%.

Thank you for all your help.

I think I figured out the solution. I renamed class Thumbnail_Images (but it doesn’t really matter what I name it) and then set this class to absolute positioning with 100% width and height and the lengthening distortion doesn’t happen anymore.

Thanks.

1 Like