Here is the website I am currently working on:
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.