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.
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'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.
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 made a simple website that is entirely scale-able...except the images. the body and all, the divs are set to percentages, in fact my purpose for designing this way was to practice making sites that would scale to any screen resolution. Everything went smoothly except the images, while the rest of the page grows or shrinks with the browser, the images either overflow or become tiny(when zooming in and out on browser). setting the image width and height to a percentage doesn't work because stretching the browser too far horizontally or vertically would cause the image to distort.
note:
I'd rather not have to hide the overflow, if I'm correct that would just cut the image off when it becomes to large(correct me if I'm wrong here)
and setting the height/ width to a max/min didn't seem like an ideal solution either.
but this problem seems to be one that I can't believe others have not encountered, so I hope someone can help me figure out a solution. please help, please...this is stressing me out :(
Style the img tag:
img {
height: auto;
max-width: 100%;
}
Now adjusting the size of the element containing the image will cause the image to scale itself accordingly.
Try setting just either height or width, whichever is more important to you. If you set both, the browser will follow your rules. If you just set width, the browser will scale the height down accordingly.
I'm working on a project like this as well, and I used
img { width: 100%; }
as well and then made sure to size the divs around each image accordingly.
I understand your concern about the images distorting at a certain size, but for me the ability to scale was most important here. I created the images so that they looked best at the size for my target audience.
If you create the images at the largest size you want them to look clear, they should also scale down, just be careful about file size if bandwidth is an issue.
If we make fluid layout we can use em or % for font and div width and height to make fluid but how to make images resizable?
I want to make one layout for all sizes and devices
Joel Spolsky managed to find a very easy solution (a small proprietary CSS definition for IE). He found the solution here.
There's no simple solution for this. You can use flexible units for the images just like you can your other page elements. But this will result in inefficiencies and aesthetic issues including excess file size for a tiny image (if you're sizing it down), pixellation of sized-up images, etc. So what you likely want is to start with a large image and scale down to the appropriate size versions, and use Javascript to write out a tag referring to the correct size image depending on context.
Well you can size images relative to the viewport width (eg. img.thing { width: 50%; }, but you don't generally want to. Scaled images will at best (when the browser does bicubic resizing) look a bit blurry, and at worst totally blocky/jaggy (nearest neighbour resizing). You can include some CSS (SVG's image-rendering will be supported for HTML in Firefox 3.6; -ms-interpolation-mode in IE) to try to coax the browsers to use the better scaling mode, but it's far from reliable and still the best rendering isn't that great.
In addition, CSS background-images cannot be resized at all (yet; it is proposed for CSS3 but you'll have a long wait).
Liquid layout generally aims to adjust the distances between fixed-size images to respond to changes in viewport width, rather than scale the whole page including images. The user can, at least in modern browsers, zoom the whole page including images themselves, taking the image quality hit if they need to.
I reckon you will have to make use of the canvas element from HTML5. Or you could have some JavaScript that sets the size of the image tag but you would have to do some math to figure out the correct proportions.