I'm using a 3x3 image grid with Lightbox (in MDBootstrap).
The images all have a 33% width (including padding).
All images are retrieved from the Instagram Basic Display API.
These images usually have a native resolution of 1440x1440px.
However, sometimes, for some odd reason, an image will have a resolution of 1440x1441 (one pixel wider).
Putting these images that are one pixel higher in a grid, scaling them down to 33% width, will cause them to be slightly larger, which thereby causes 3 images to no longer fit on one row. Please see example below:
As you can see, the images aren't aligned in a 3x3 grid. I found out that this is caused by the second image in the top row, which is actually 156 in width by 156.094px in height(!). This is obviously caused by the image provided by Instagram being 1440x1441 (in stead of 1440x1440):
I have tried using display: inline-table on the image object as someone in another topic suggested (to round down decimal pixels), but this didn't work. Manually resizing the image to 155.891px x 156px (using Inspect Element in Chrome) makes the image fit:
So my question is: without having to check every image's width with javascript and resizing all of them to the same height, how can I make sure the image has an exact 1:1 aspect ratio as opposed to ~1:1.001 to prevent this from happening?
Any help would be greatly appreciated!
EDIT: fixed switching height/width around, thanks #CBroe
Related
The offending website: http://www.jasonmfry.com. The corresponding codepen: https://codepen.io/Auslegung/pen/Roapwv.
Scroll down until you can see a half inch of the image at the top of your screen, and you will notice another half inch of white above that. I want the images to fill the container and not leave that white space above themselves. I have tested this on the latest Chrome and Safari builds on Mac. On iPhone Chrome and Safari there is no white space, fwiw.
Removing line 88 of styles.css background-repeat: no-repeat fills that white space with the bottom of the image, but of course I don't want that. Reducing the scale value on line 94 transform: translateZ(1px) scale(1.08) will reduce the amount of white space shown, but at the expense of the parallax scrolling effect. How can I get the images to fill up that entire area, while still exhibiting parallax scrolling?
I've done a lot of googling and experimenting and haven't been able to figure anything out. Let me know if I'm missing any info that you need to help me out. I'm also having issues with image ratio during browser resize but that's another question altogether.
I used to be a WDI instructor, and actually probably would have taught your particular online class but left to go work on other things. Kudos on using StackOverflow! Say hi to Marc, Matt, and whoever else is around. :)
The issue here is that by default scale resizes things relative to the center of the element. You want it to center things relative to the bottom of the element.
Putting it another way: think of scale as sending out little arms to the edges of your image to pull in the edges. By default, the arms reach out from the center of your image and pull in all its edges equally. You want them to reach out out from the top of your image and "pull" up the bottom edge.
TLDR, just add this line: transform-origin:bottom;!
Edit:
The issue here is actually with the dimensions of the images themselves.
As long as the ratio of the window's height/width is greater than the image's height/width you won't have any issues, but once the window's ratio is smaller than the image's ratio you'll see that whitespace.
Your headshot is almost square, whereas the other images are very rectangular. If your browser window is wider than it is tall the headshot will behave, but resize the window to be taller than it is wide and you see the whitespace again. Conversely, make the window much shorter than it is wide and all the images will behave themselves.
You could resize all the images to be narrow and tall. The largest aspect ratio on devices is 16:9, so make the images <9x wide and >16x tall and you should be good.
Unfortunately I don't think there's slicker solution for this other than using Javascript.
I've been searching for two days, and trying all sorts of different options, but none of them do what I want. I'm positive this should be possible through CSS, but haven't come across the solution yet.
We want to have a single-cell table that is 100% of the page width, but a fixed page height (although we may be able to work around a % page height.) The table should either contain an extremely large image (that gets sized to 100% of the table width) or have a background image that does the same (so it never repeats, and just sizes up to always stay 100% of the table.
However, when the window is shrunk down, we want the table height to shrink, and "cut off" the image at either the top or bottom.
So far, I have no problem with the expansion issue, but I have yet to find a solution that shrinks the table height at all. It either downsizes by the correct ratio for the new size of the page, or it stays exactly the same size.
Can anyone offer any suggestions?
It would help if you posted a sample HTML and CSS, but in a more generic sense, I'd point you out to Flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and adding overflow: hidden to the DIV that contains the image.
I’ve been working on this for over 10 hours, searching the web for a solution, to no avail.
Here is the screen capture of the sketch:
I need to produce a grid layout with the following requirements:
The whole thing is in a horizontal scrolling layout.
Responsive in height, relative to its container (which is already responsive relative to body, using the Stretch-to-margin technic).
3 lines of equal height (33.333%)
Composed of square images anchors
On mouse over: color overlay with white text
The square images need to keep their proportion (reduce the height of the window, image width must scale down.
The width of the whole layout must be dynamic, since the number of squares may vary.
I’ve seen tons of examples where the width is defined, and using the padding-top value to define the height. It would not work here since the Height is the defining value.
I will be posting again with updates tomorrow.
I’m kinda desperate. Thinking of taking up drinking (kidding).
The Question is Answered!
I finally used the "vh" unit, and applied it to HEIGHT and WIDTH of all the squares.
Goes something like this:
.c-squares{
width:30vh;
height:30vh;
display:inline;
}
So clean, can’t believe I’ve never knew about "vh" unit.
I always wondered how to fix the gap between floating elements if they don't have the same height:
Here you can see a gap between Featured and Notice which I would like to get rid of. (Get's even larger when the screen resolution is larger since the Featured box becomes more stretched and thus the text spreads over less lines)
Maybe important to note that this is the order of the floating left elments:
Featured
News
Headlines
Notice
Layout for smaller screens (this is looking perfectly fine I just wanted to show you what I mean in the following description with inconsistent layout based on screen resolution)
If the design would be consistent I wouldn't mind implementing some kind of grid system but in my case I'm using styles based on screen resolution so at a certain screen resolution the boxes change from 50% to 100% width (no fixed value used here).
I thought that fluid girds might be the right way to go but after checking them (never used them before) they feel rather static and I'm not sure that they can solve this problem.
EDIT:
Sample of the broblem: http://jsfiddle.net/UfVrH/. Note the fixed height values in A-D are only there to simulate content stretching the div.
To fix such an issue you need to calculate the width and height of each element and re-arrange them by positioning them absolutely, luckily for you there is such a plugin that does this, Isotope
Situation
A Flex project exported as a Projector, showing fullscreen. The project has a background and several dots which each represent a "Location". These locations are fetched from an XML file and have their position set in percentages. The location in pixels is calculated (this works as it should) by the width and height of the Application. The dots are placed correctly.
The background is a JPG with a resolution of 1280*1024. At this moment, the background is set on a Canvas with backgroundSize = auto. This places the image in the center without stretching it. Stretching results in ugly, pixelated images and tears the proportions apart.
Problem
When we view the project on 2 different resolutions (1 = 1280*1024; 2 = 1024*768), the dots are in the good position, the background image is sharp. But - because of the background having the same resolution as 1, the background isn't fully shown in resolution 2 (because it isn't stretched. A logic result.
That's why I tried stretching the background. The results:
Dots placed in the correct way http://i733.photobucket.com/albums/ww336/winkelman66/example1.jpg
On a smaller/other resolution:
alt text http://i733.photobucket.com/albums/ww336/winkelman66/example2.jpg
Solution?
How should I solve this problem? I thought of always having the background centered on the bottom, leaving the proportions as they are. This is not an option because of missing details/parts of the image. Stretching results in ugly, pixelated images which are out of proportion.
I know stretching might be the only option to tackle the resolution problem without losing parts of the image, but how can I solve the problem where the dots aren't in the good position (like image 2 shows).
Don't know if this is exactly what you mean but i'll give it a shot :P
Get the original background size
Get the size of the stretched background
calc the width and height difference
Reflect the difference on the points position
Big problem, simple solution (after working hours on this).
We just forgot 1 simple thing in our calculations: reflect the size (width/height) of the dots in the position...
So if you face the same problem when calculating the location in pixels from percentages, don't forget to include (viewToBePositioned.width / 2) in your calculations :-)