I've searched all over the web and throughout stackoverflow to solve the following problem and although there is tons of posts and feedback on the subject, i cannot find anything that relates specifically to what i'm trying to achieve.
I want to create an image grid/ gallery that is fluid and 100% browser width with responsive images that all resize together. Each 'row of images' has a specific height and all the images within that given row also have the exact same height, but use different widths.
This image better illustrates what i'm trying to achieve-
http://development.revolutionworx.com/image/1.png
The problem i'm getting is that whichever solution i try, i cannot get the images to be the same height no matter what. I would post my code but at this stage i have literally tried dozens and dozens of html and css combinations, none of which work.
On one hand i was led to believe that it's impossible to achieve what i'm looking for using css, however this site appears to have same height images side by side which do resize equally together- http;//www.esquire.co.uk
When i tried masonry.js i also encountered the same problem. Image heights varied according to the width of an image and either shrunk too small within their container or expanded out of their container leaving unequal height boxes side by side. Any pointers or suggestions would be greatly appreciated.
Related
As far as I noticed it's super popular and common problem, but all solutions that I have tried failed at the end.
I have a test-ish website: https://mojastrona.hekko.pl/baltyk-strona-glowna/
And what I can't achieve is to fit the background image to any resolution.
Here are my settings for the elementor section:
But that doesn't provide perfect image fit. It is being cut. I tried to add some solutions into .css file, that I have found on the Internet, but none of them works.
What you're trying to do is next to impossible (within reason).
Let's say your image has dimensions of 4:3. Now what happens if someone looks at your website on a 16:9 monitor? The container (and thus the image) would have to either have some blank space above and below OR to the left and right.
There are several reliable alternatives to getting what you want:
Position your image so that the most important pieces of the motive is always present (eg. "center top" so that the text in the top of the image is always visible
Add a "min height" to the parent container - the section would be the obvious choice. Playing around with VH/%-units might give you a more reliable result
Place your image as a simple image-widget instead of as a background-image. Set the width to 100%. Make sure your section is set to "Full width/no gap". Your image will now always be the full width of the screen, without being shrunk by the parent container.
Obviously #3 comes with several limits, as placing content on top of your image is made much harder.
I have been trying to code a responsive thumbnail group that I'd like it to respect to a few rules.
I came very close but the implementation always end up not satisfying at least one of the rules. In other words when I try to do one thing it always cancels the other.
In summary, what I am trying to achieve is something like this -
http://postimg.org/image/4yx6poscz/f57d6517/ (I wasn't allowed to post a picture, sorry)
So basically, what I am after is;
When the user resizes the window the thumbnails (consist of an image and some basic HTML) will shrink up to a point.
When the breakpoint is reached, the most left one will disappear and the rest of the thumbnails will return to their original size.
Continue until the min-body size where we just display the x-axis scrollbar.
So, referring to the image, providing that no resizing is done just yet, the items will shrink, lets say until 20% and then Item 7 will disappear letting free space to the rest of the row to expand to their original size.
I am currently using the latest version of bootstrap however, as you may guess col-lg col-md and etc. classes are not really helpful in this case. I have come up with some custom breakpoints but I can't get my head around the shrinking back to the original size issue. That is where I get stuck.
Also I think it's worth mentioning that Ive been trying to come up with a solution that is pure HTML and CSS however I am definitely open to JS solutions as well.
A good example would be spotify's webplayer (play.spotify.com) thumbnail examples.
Thank you very much in advance for your suggestions.
If you view this site and reduce the size of your browser window, the top two primary blocks (image carousel and "Latest News") will overlap: http://africanstudies.stanford.edu/
I have tried a number of methods to fix this, but I can't come up with anything that doesn't overlap and look awful. (I also had to add some width/height settings to the carousel because I think there may be a bug with jCarousel where the entire image is not displayed if you don't specify the height for example.)
What I'd really like to happen is both the blocks scale down as the browser scales, but I'm afraid that's beyond my current capabilities.
Anyone have any thoughts on how to handle this? I can post HTML/CSS, but it's pretty ugly.
You've set the height on #views_slideshow_singleframe_main_home_banner_cycle-block_1 to 270px, if you remove that then it seems to be fine. Btw, you have essentially the same issue in the horizontal direction, i.e. at a certain width the slide show overlaps the Latest News.
I have looked at many different peoples answers to this problem but they only account for one image.
I am having a problem with the the two images that i have placed in my header, when i resize my browser i want them to scale down with it so that they dont displace my whole site.
i have it hosted in dropbox so you can see what my problem is: https://dl.dropbox.com/u/13722201/Dorset%20Designs/home.html
also another problem im having is un attaching the footer from the bottom of the screen and putting it below the body so users have to scroll down.
p.s I attached the footer to the bottom many months ago and I forgot how to undo it.
SORRY FOR THE TERRIBLY MESSY CODE
thanks in advance
Arran, 16
Here's how I'd do it. First, style each image using CSS to have width:100% and height:auto. This makes them respond to the sizes of their containers. Lose those width and height attributes from the img tag - I'm not even sure if those are valid anymore.
Now here's where the clever part comes. Your images are 550px and 298px wide, which is roughly a 65%:35% ratio. When the header is at its most narrow point before breaking, it's about as wide as the sum of the two. So give the big image's container max-width:65%, and the small image's container div max-width:35%.
This way, when the browser window is smaller, the images scale down correspondingly - and don't become larger than they need to be when the window is wide. I tried it out on your page, and I think it worked - see if it works for you. :)
I've been trying the CSS photo gallery example here to set up my own (here is the code). Everything works fine except:
(1) The divs are setup using absolute measures in px. I find it frustrating to have to resize and adapt my photos to fit them. Instead, is there a way to setup up all the dimensions of the gallery (via the CSS), such as in % or em, so that the gallery adapts to the images I put in it, and also dynamically fit the viewport size of a browser?
(2) I tried to add my own photos to the gallery, yet if my photos' dimensions don't match that of the divs, they overflow. Is there a way to specify larger images to change their sizes to fill their containers, and maintain their aspect ratio?
Thanks.
(1) I would not set up the entire gallery in % or scale it dynamically to fit the browser. This can lead to unexpected results and problems. To fit the images into the divs you could set up a bash script with imagemagick to resize all your images. (May even your server can do this for you. If you are on Windows there are programs to batch-resize images like Shrink-O-Matic.)
(2) You can just set up a fixed hight or width (only one of them) to put the image in a fixed dimension. The browser will then scale the image to fit that value proportionally. The CSS would look like this:
#container .pics span img {height: 400px;}
That should work.
If you really want a gallery that "scales" to the browser size, may you have to look around for another one. There are thousands out there and it would be to much work to modify this one to your needs.
Good luck.