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
Related
Building out a flickity carousel to look like this and having some issues w/ spacing on my CodePen.
codepen
looks good but want to make spacing between slides less and also the spacing is fairly equal but not 100% equal between each. For example, it says left 10% for the spacing but if you put a few more vertical photos back to back, see this image for approximate spacing in pixels that are not the same equal widths (pic)
Images should be <img src="x"> versus background image as well for accessibility and adding alt tags too.
Anyone have any hints in the code on how to fix it so the images appear larger, then take up more space (so there's less space between the slides) and also ensure that any image i put in there is equally horizontally spaced between them? Seems very close on the example attached. I tried messing with the padding/widths on 1st one but it gets strange.
Remove height: 100% from the image and only leave width: 100% so all images are going to have the same horizontal space.
And use .ui-thumbnail-img to center the image inside it.
I create a jsfiddle for the solution. https://jsfiddle.net/vzphr3n5/3/
Product Image resize css coding or theme modules
I want product image resize size will be Reduce in top and bottom white space pls help me as it it is image pls My Site URL http://104.131.84.58/index.php
Crop the image closer to the left and right edges of the product. That will cause the image to fill more vertical space.
Assuming I understand your question correctly.
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/
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.