I need an image slider which resizes the images only if its needed (the size of the image is bigger than the div containing the slider).
I've tried with AnythingSlider, but when I set the width and height to the div containing the slider, the images that are smaller than the div are stretched. I don't want them to be stretched.
You could just do a check in javascript/jquery to see what the size of the image is. If it's bigger than the desired dimension you can just scale it down.
play with this . add condition for styling
http://webdesignledger.com/tutorials/create-a-resizable-image-grid-with-jquery
http://demos.webdesignledger.com/jquery_image_grid/example2.htm
Related
I was wondering, is it possible to place a div on top of a specific part of an image without the div moving when the window size changes?
Example: Placing an image inside of the "PLACE IMAGE HERE", and the image should stay inside of that area when resizing the screen:
I tried to use position: absolute but obviously that doesn't work when the window size changes.
You need to define both width and height for both image - the outer one and the screen one. Or you can give relative width and height in %, vh, vw or some other relative values in css. But again, it will crop the image in some device, you need to be careful while giving proper sizes using media queries also.
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.
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 gallery with images and description text.
Some of the images are short and wide, which display fine, but the tall narrow images all display the text in the same width as the image underneath. Like this:
I want to be able to have the whole box set as a minimum width of 800px, but not have the image try and strech to this size. The image must stay at the same size, and float in the middle.
using minWidth / Width / Height all don't display this correctly, and all of them focus on the image size, not the box size.
The only way around it I can think of at the moment would be to add white space to the narrow images.
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.