I have a fixed height and width container (2480px x 3508) which I would like to dynamically fill with content. Content being between 6-12 images. My question is how I could dynamically size the images relative to their total number and to the size of the container. The images are all approximately the same size, only varying slightly based on their orientation. So basically when there are more images, they are smaller, and when there are less they are bigger and they fill the container as best as possible.
I have not been able to find any Isotope demos which match this? I know there is also packery, and masonry.
Any ideas, tips or examples would be great.
Thanks!
Imagefill.js does exactly that. It is aimed more at individual images but it can also be made to work on a series of images and in combination with Packery.
http://johnpolacek.github.io/imagefill.js/
Related
I am currently building a portfolio website for myself. I have an array of projects that are flex and change size as the window changes size, once they get to a min-width they wrap over to the next line. My problem is that when the website is loaded for the first time without a cache, the images haven't loaded yet and the height of their container doesn't fit them. This causes a lot of overlap, but when the page is refreshed and there is a cache it fixes itself. An example is shown here:
The cache problem.
My idea to fix this was to make a min-height, but since its responsive and the size of the container changes, I don't know how to set the min-height. I was thinking of setting it to a mathematical relation to the width of the view port window, but wasn't sure if I had the skills to make that work. I will happily attach the code if needed.
If you want to preserve space for an existing image you can wrap it into a div and adjust this div's dimensions any way you like. For example, you can set min-height. Or if the image height varies you can use loading indicators (gif loading animations) with their own dimensions, and when your images finally load, you can replace the gifs with the actual images using js onload event
To make space for images before they load you need to give each image a corresponding value(*) of its height and width.
( * - in good coding practices, this is actually a requirement ! )
For example ::
<img src=[url] width=180px height=300px>
If you want a fast, stable, responsive, robust and absolutely solid page - Never leave images, tables and table-cell columns without a 1. width and 2.height specs.
Even if they are flexy, you are highly encouraged to at least use relative size (%).
<img src=[url] width=60% height=100%> /*relative::Let's say this set of images is in a
div who's css height is 300px. The images width given as 60% matches exactly its pixel
width, which is 180px.*/
You will immediately notice a tremendous improvement of your page performance and have away better experience working with them. Depending on the complexity of elements a ten fold improvement of the render speed may be achieved.
I'm working with this Script:
https://www.w3schools.com/howto/howto_js_portfolio_filter.asp
My problem is that my images have different heights and I don't want that gap between. How is it possible to remove them? The gap height should be always same.
Thank you!
Love
Is there any easy wy to reach the effect the same as on this page?
eqal height and fit some images to container width
There are many approaches. I personally like the technique of setting the images as backgrounds of container elements and then using background-size:cover or :contain along with sizing the containers and perhaps using Flexbox to organize the containers into rows and columns.
But, ultimately, you're going to have to have images that compliment your layout goal by having the right aspect ratios and orientations.
I have seen some jQuery scripts that you can create photo gallery in a mosaic way. Like this one http://www.themepunch.com/codecanyon/megafolio/megafolio_dark.html or this http://www.themepunch.com/codecanyon/megafolio/megafolio_light.html
My photos have different sizes but most of them are bigger in width than height.
My goal is to automatically and randomly set the dimensions of a container for the image (and load the original image) instead of cropping them manually and set them as a thumbnail in different sizes.
For example, in first entrance img1.jpg it will be shown as 100x50 but upon refresh, the same image it may be shown as 50x100.
My question is how can I create this effect with CSS and javascript ?
Based on the links in your question, I see three types of images: vertical, horizontal and square images. Thus, not randomly sized.
Also, it appears to be nicely laid out in a grid layout. The width of the vertical images is half the width of a horizontal image, the height of a vertical image is twice the height of a horizontal images (so basically it's just flipped) and the square images are equal to the width of either the horizontal or vertical images.
By establishing a grid and column size, you can dynamically position containers containing the images and assigning them a shape, for a lack of a better term, and an orientation. With some jQuery you can then easily position them using the .css function, relative to the other containers.
Note: The thumbnails used in your example, are equal to the size of their container. This is also a good idea for you, seeing as how it will make sure you get the desired effect.
I am doing on a webpage for display a large amount of pictures/thumbnails. What I am looking for is to auto-resize the pictures, make each line has fixed height, and the right margin of each line is also equal. Even the images are reformatted when I change the size of window, the above mentioned style is kept.
That is quite similar with what google did when displaying their images search results:
Google image example (resize your browser window and you may find what I'm trying to say :-) )
Anyone has idea on this would be much appreciated! Thanks
According to me there 2-ways, 1)by css 2)by js
1)CSS: you can add this in your css, this will resize your thumbnail accordingly.
img{max-width:100%;}
2)JS: Using js you can resize the thumbnails based on the available space and also decide on how many images do you want to show in one row.