I'm trying to create a responsive gallery with images of various dimensions. The idea is to have 5 square divs of the same size on full screen, each image is centered both horizontally and vertically, scaled to fit with some padding (proportional, according to window size). Spacing among divs is the same both horizontal and vertical (again proportional (%) based on window size - to have a nice tidy view. There is min and max size of divs so when min size of divs in one row is reached they are reordered, meaning the last one on row 1 will move to row 2 etc, keeping the fixed (proportional) spacing.
Is this even possible with just CSS?
The closest example I could find is this:
<code>http://codepen.io/anon/pen/QGwwEB</code> but I was not able to turn it to what I need.
if you are using bootstrap classes then write
<img src="" alt="image" class="img-responsive">
Related
I have images inside an html article that is set to columns using a fixed column-width attribute on containing div.
I've added srcset for reponsive images which works fine except it loads the largest image based on the width of the containing div not a smaller image based on the width of the columns.
In some cases the article is displayed without columns so I was hoping the same image srcset can cater for both situations. Is there any way to make srcset select the smaller sized image when its showing the content in fixed with columns?
For lack of responses, I came up with wrapping div around the images so the div scales to the column and srcset picks image is selected based on the wrapper rather than the full div. If anyone has a better solution please share.
Update: Doesn't work as srcset looks at the viewport not the wrapping div. One way to solve this might be to just use 30vw in sizes if its in multicolumn or calculate the number of columns using the width of containing div and use that value as the vw amount in sizes.
I've designed an image grid using bootstrap using images that are either 360px square, or 360px high by 720px wide. For some reason, the wide images display taller in the row. Any idea why this is happening and how to fix it?
Here is the code in bootply
Thanks!
The images won't display at the same height just because they're the same physical height because they are scaling with your layout. And the padding in each column and elements in the columns reduces the horizontal space available for the images, and when the horizontal size changes, the vertical size will change, too (to scale the image properly).
Look at how the left/wide image is only in a single column, but the 2 images on the right are in 2 columns. There is more padding in the 2 images on the right than on the left (twice as much padding, since there are twice as many images). That's scaling the height of each to be shorter than the image on the left.
I removed the padding from the .col-* classes and .thumbnail to show that if you remove those, the images line up.
http://www.bootply.com/KacXrRCbYH
You would fix this any number of ways, but I think that needs to be up to you as to what's going to work best for your layout. The easiest way is probably just to change the height of the image on the left to account for that padding. 720x341 seems to be the resolution that works there.
http://www.bootply.com/T4F3fdgNyf
Images displayed in goolge images end squarely at the right hand side of the page regardless of image dimensions or screen size. I was thinking that perhaps it is possible to add some sort of dynamic padding to make images fit squarely into a div? If anyone has any suggestions on how to do this it would be greatly appreciated!
Define the height of each row and the minimum and maximum width you want.
Calculate the width of your image if you scale it to the given height.
If the calculated width lies between the minimum and maximum width, scale it to this size.
If the width is smaller, scale the image so it has the minimum width, and crop it so it has the proper height.
If the width is bigger then the maximum, scale it this way and crop it, so it has the right width.
In order to make all the images fit the row perfectly, you might need to adjust the minimum and maximum width. Especially images which need to be cropped anyway can be used to adjust the length of the row.
You can achieve this using CSS (& JavaScript) or by doing it on the server side. If your page width is dynamic, you have to rely on CSS/JavaScript though.
So basically I am building a full screen food image grid using bootstrap 3. I have used container-fluid and the appropriate columns to define the width of my rows and breakpoints. Each of the columns contains a food image and uses the class - col-lg-2 col-md-3 col-sm-4 col-xs-4
I didn't want a gutter between the images so I removed the left and right padding assigned to the column class which gives me the exact look I want. Now when I resize the grid, it all works fine. However in between screen widths 950px and 980px, the images have a gutter between them vertically. I am unsure whats causing this. Does anyone have an idea?
I have attached a few pictures to illustrate along with bootply
http://www.bootply.com/xXaaLRWKTL . It happens in this example around the tablet screen break point. Resize the window and take a look, you will see the gutter comes back at the break point
http://imgur.com/a/ACSwA
Thanks
In the case of the example, it's because of the images.
The images have the class img-responsive, which sets the property max-width: 100%. Since that particular image's max width is 320px, the images itself stop at 320px (the actual div is acting as it should). Either use a bigger image, or remove the max-width property and set width: 100%.
I'm attempting to make a 2x2 grid with each cell 300x300px. Each cell has an image, which fades in and out, reloaded using AJAX ( jQuery to be precise) - creating a 4 image gallery over ajax.
All images are simply dumped into a folder, so there is no defined height or width of them.
Is there any way by which I can have the fill the space? eg, a portrait shaped image would resize to height=300, while its width might be smaller... and similarly for a landscape image ( width=300 with smaller height)? I'm trying to eliminate any resizing of the cells, because it is rather horrible to watch.
I"ll leave centering these vertically and horizontally till later.
Thanks for any help!
UPDATE:
I've pastebin'ed the current code
http://pastebin.com/Hz4fJk9p
Use max-height:300px; and max-width:300px;, assuming your image is not smaller than 300px in both dimensions to begin with.
Even if it's not CSS, I've found some interesting libraries for doing image resizing to fit the container:
http://plugins.jquery.com/project/myimgscale
http://code.google.com/p/jquery-imagefit-plugin/