Resize image based on class - javascript

I am using isotope.js in a wordpress theme. I want the user to upload a single image, and then select its shape.
The shape choices are square, long rectangle, and tall rectangle. I'd rather not have the user upload an additional image if they don't have to - and I'd rather use either CSS or Javascript/jQuery to handle the shaping process.
Is this even possible?
::edit:: this is in a responsive layout, so I can't use hard pixel sizes for heights or widths.

Related

Display canvas in smaller size while maintaining resolution

I'm trying to create an online tool using html/javascript where users can upload their pictures that are imported into a canvas and then they can overlay other pictures on top of them, resize and move them around. To add this, I'm using fabric.js.
I do want to maintain the Image resolutions while I do this, so I have to resize the canvas according to the size of the base image which can get out of hand if the image is 4000px wide. What I'd like to do is display the images in a limited area such as 1000x1000 while maintaining the original size to provide the users with the original resolution when they are done. I tried messing around with CSS to limit the canvas display size but unlike img, canvas seems to override the limits I specify. I'm also using github pages to host this.
What would be the best way to do this?
I'd keep track of my images separately from my rendering layer. So, I'd either keep them in a hash or array in memory or, if that's too expensive, I'd persist them to storage (server side or in S3 or whatever).
Then, you just render low(er)-fidelity images to your canvas.

Is it possible to repeat the background image in html mirrored horizontally

The background customer gave us has 4:3 aspect ratio and looks horrible when repeated on modern screen. I thought if I can mirror each repeat horizontally it would look nicer. Is this possible with plain CSS?
Not with background images. You can mirror single elements, but not a part of a single element (as a background image is).
I guess the best option would be to save the image including its mirrored version into one graphic file and repeat this one.

CSS/Javascript code to provide image border for many sizes of HTML div

I'm intending to write a HTML5/Javascript game to run in modern browsers. It will need dialog boxes (i.e. modal popups) whose borders would be made of images (e.g. one for the vertical, one for the horizontal, one for each corner). The popups, and therefore border, should contain and size to a div (containing text or whatever). There will be lots of different size popups. So I can provide (repeatable?) images from which the borders should be made, but I don't want to create an image for every size of popup that I need in my game.
I hope that my requirements are clear enough. Can I do this with just CSS? Are there some sample CSS 'libraries' to do this? Or do I need to use Javascript (or a combination of CSS and Javascript) and, again, if so there any example or libraries I can use?
You can do this pure css by assigning each type of element (left border, lower left corner) etc a class and then setting the background image and width/height of the css for that class to the image and dimensions you require.

How to create a tile photo gallery with random sizes for the 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.

Resize all elements including draggable images on a screen upon window resize in javascript or jquery

I am trying to resize all elements on a web page upon resizing the window. The background image needs to stretch along with draggable items, text boxes, font size, and other images. The draggable items needs to stay in the same place in proportion to the background image. Everything needs to maintain aspect ratio. I have tried numerous methods and none seem to work.
As far as the background image scaling to whatever is going on on the page, see my reply to this guys similar question.
resize the image to fit the dimensions of TD
as far as other objects changing but maintaining aspect rations you may want to look into css Media Queries.
good luck

Categories

Resources