im using a image preview that allows me to add css styles to the previews that pops up.
now, some images are larger than the screen so you will just see a portion of them, while other images are very small so you don't have to resize them.
is there a way to only resize the larger images and not touching the smaller ones, eg. only resize images with width or height larger than 400 px?
any other approaches to make the larger ones fit into the screen without affecting the smaller ones would be appreciated cause if i just use width=400px and height=400px all images will be at that size and the proportion will be wrong. and for smaller images you will se very large pixels.
thanks in advance
Seam carving javascript implementation is what I call smart resizing of images :)
Anyway, in Javascript, you can implement your logic depending on the width and height properties of the Image object.
Also have a look at this page, the author uses jQuery to resize images larger than specified dimensions.
Related
when i work with flash i getting trouble when working with images
now my present project i'm uploading images dynamically, but here main problem is all the images sizes are different when i put the images into flash canvas every image looking different size means exact image size, but i need all the images should look same size in the canvas
check the image
if i change both of the height and width values that is not effecting any where, that is automatically taking fixed images size but i need all the images looks exact size, i didn't get any thing
I think I have the solution to your problem.
Basically, you need to create a container (if you haven't already done so) to 'hold' the images as they come up OR know the maximum height and width you want for the images. Then you need to make sure the aspect ratio is correct (so your picture won't be skewed. )
Code Example:
var wHRatio:Number=image.width/image.height; //this will give you the width to height ratio to make sure aspect ratio stays the same.
if (image.width>mcContainer.width){ //if not using container, enter max width
image.width=mcContainer.width;
image.height=image.width/wHRatio;
// at this point, if the height is still taller than the container, you want to shrink the image again so it's no taller than the container.
if (image.height>mcContainer.height){ //if not using container, enter max height
image.height=mcContainer.height;
image.width=image.height*wHRatio;
}
}
**** Don't forget to 'addChild' after you've completed the re-sizing.
This may not be the most efficient way of doing things, but I think it will work for your purposes.
I'm struggling with a issue with my images. i have a series of images and i want to resize the m to fit is container based on the biggest one. preferably handled in jquery, javascript. there is an example below:
http://jsbin.com/bicupana/1/edit?html,css,js,output
So you see the images. The need to be resized proportionally, based on the largest image. i want the larges image to be filling 80% of it's parent, the body in this case. The reason why i'm struggling is that sometimes the width is bigger than the height and sometimes the height is bigger than the width.
The second reason i'm worried about is performance. If there are a lot of images, will people see the images flickering from big the the final size?
Can you make your canvas resize to the page width using the style in the html of the canvas id?
And then in your js for the canvas just resize listeners based on the size of the canvas at the current time?
I have many of my variables and listeners hardcoded just wondering what is the fastest method of solving this :)
Firstly, a good starting thing would be not to take the entire page width, but a divcontainer. That way if you end up putting your app in a website or anything, your code will adapt to any container. If you want it to be the full page, this container can just be a 100% width/height absolute with no padding/margin.
Please also note that there are two sizes for a canvas :
The HTML size, which is the size you will draw on "programmatically"
The CSS size, which is the size it will be displayed, independently of the other size (and it will resize it, causing potential distortions)
Based on that, you can know an element's screen width using jquery $("#myID").width() or height(), which applies to the canvas too. Based on this you can set whatever size you want in html and/or css :
$("#myCanvas").width = 400; // The size you will draw on
$("#myCanvas").css('width', '800'); // The size it will be displayed (2x scale in X in that case)
Then for resizing you have multiple solutions :
CSS full stretching : You use your canvas with whatever size you'd like to code in, and then resize it in CSS to use the full page width, that is basically putting the css at 100% width / height
CSS stretching with aspect ratio : My prefered solution, which consists of resizing the canvas in CSS, but by keeping the original application's aspect ratio (and putting black borders on the rest of the screen, like in large-screen movies)
Pure canvas resizing : This method won't destroy graphics, but it has the big cost of making you think all your drawing with any size possible. Instead of having a fixed size canvas that is resized by the browser, you will have to multiply all your drawing sizes and positions according to the screen size, which can end up being very boring, and problematic if not thought soon in the development.
As an exemple here is my canvas manager, with CSS aspect ratio resizing. It is not documented and may not suit your need, but it can give you some ideas
I know there are a ton of questions on here related to this, but nothing that directly solved my situation. Here's the site I am working on:
http://ledvideowall.net
As you re-size the browser window width smaller, the background images behind "LED Video Wall rental and sales" and "CONTACT US" scale down, but the height of the containers stay fixed, creating the extra white space in between those elements.
Is there an easy way to set the starting height of those two elements but also have the height scale along with the width while keeping the aspect ratio of those images?
Thanks
wouldn't it be easier to make the contact us bit using a div layered over the top with its transparency set to 50% rather than try to resize 3 images in unison
I'm trying to fit 3 pictures in one HTML page, such that maximum screen area will be used, without scrolling. When screen size changes the pictures should be re-arranged, covering maximum screen arena. Each picture has different dimensions. For easier fitting each pic could be cropped (2:3 proportion max). The layout should be fluid and responsive. See example below
Two frameworks I'm considering for this problem are Twitter Bootstrap and jQuery Masonry, but none of these solves the problem of fitting.
Currently I solve this problem making square thumbnails out of each with css and overlapping those pictures, but users want the see the entire picture without overlapping and as big as possible:
!
you can see it in action at vash.co
You can get pretty close using pure CSS. Take this example, try it in Google Chrome: http://jsbin.com/ixomav/1 (source)
It's pretty crude but it should get the idea across. Going furthur you could add js code to resize images with a proper aspect ratio or keep trying with a css only approach. I used random images from wikipedia for my example but you may have an easier time if all your photos are the same dimensions.
If you remove the height you'll get properly aspected images but the problem with that is the white space, example: http://jsbin.com/ixomav/2
Check out Isotope: http://isotope.metafizzy.co/demos/images.html