I'm designing a website for an artist, and using JQuery to pull images from directories to display on their website.
The problem is that the images are all different sizes, and it's hard to make them look nice in a grid.
In the following example, you can see the images are the same height as the other images in their row, but the width of each row is adjusted so that the rows are of equal length.
How is this achieved? Here is a live example: https://www.zhangjingna.com/
This is achieved using a flexbox and flex-wrap in css.
You probably also need some logic to determine the width of the three images you want to display and use that to set the images width according to that in relation to window.innerWidth. Then in css you can set the height to your desired height (maybe an average of the heights of your images?) and set the object-fit css property of your images to cover;
BTW: The way your example does it is by just arranging the images with absolute positions, which is a nightmare
You should dynamically check aspect ratio of every image, if it is horizontal (landscape), then set image width to 33.3% and don't set height.
If aspect ratio of image is vertical (portrait), then set image height to your row height, for example 300px and don't set width.
Related
I'm making a small review card project.
I got the functionality of the card and how I want everything placed. Problem is I want all the pictures to stay the same size without having to set media queries every like 150-200px
I know I can get the initial width/height of the images with no problem. But If I set the images to an initial size is there a way for me to then scale it from that initial size with say the viewport width or viewport height? They are all the same aspect ratio, so I found a size that works for all pictures as the initial size
For those looking for a similar solution I did a portion outside of the code as it made it a lot easier. I just cropped the photos and set them all to the same aspect ratio to start off.
Then I was able to set an initial width on my images to a pixel length.
Then use #media queries to keep them scaled properly for larger screens, I only had to do it for 4 different screen sizes to keep the layout looking proper.
Example:
image {
width: 300px
}
#media screen only and (width: 1920px) {
width: 800px
}
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 know there were similar questions, but this is slightly different. Just read description)
I have a main container (red) that is stretching depending on screen size. Inside of it there is second container (blue) that has div with fixed height at the top and background picture.
At first I tried using background: cover for picture in the background. But at some sizes different parts of background cannot be seen and that's a no no.
So what I'm trying to achieve is for svg background to stretch depending on blue container's width and remain it's ratio. Also, I want second container to change height depending on it's background, so whole svg picture will be always visible.
Is it possible to achieve with only css? If not, then how can I make it using js? I cannot make changes to existing html.
You can set a minimum width to SVG background to make sure it doesn't become so small that the picture is cut off. As far as the boxes maintaining their ratios you can use percentages for both the width and the height and set them to whatever you want, for example, the width of container2 is 70% of the width of container, and SVG background is 90% of the width of container2.
I have a twitter bootstrap carousel in which I have images and iframes. Images work perfectly because they have img-responsive class and they resize. The iframes don't work like that. I have to give them a width and a height and change their width and height whenever the user resizes the browser.
The carousel can contains only images, only iframes, or images and iframes in the same time.
How can I make the iframes work like the images? Have the same dimensions, resizes in the same way?
My images are 750 x 427px. The thing that passes my mind is to give the iframes width 100% of the container because this work and after this I have to find the height considering that if the width is for example 300px the height should direct proportional with the image dimensions which are 750 x 427px.
We can simply use the rule of three ? Or there is somehthing more complex using image ratio?
Through .height() and .width methods.
You could use $("#imgID").height() to get its height and $("#imgID").width() to get its width. Of course the imgID is replaced with the actual ID of your image.
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.