I've an gallery with different size of images. Is there any solution to crop them during display?
I've tried to set style height: xxxpx but it looks awful (with width too). This images display from another sites, so I cant just download them and crop :(
You can crop an image by putting it inside an
overflow: hidden;
div.
Heres a JSFiddle example Cropped Image, of course you wil probably want to use same javascript to centre/position the image and not simple setup magin numbers in the example I've done, but still it shows how to crop the image.
Here is a jQuery plug-in that should do the trick:
http://odyniec.net/projects/imgareaselect/
You could also just set the width to a pixel measure in the html or the css and leave the height, or vice-versa, depending on whether you need them the same height or same width. Then they will be reduced but not distorted... obviously, if you need to crop to a set height and width, this won't work, but it will give you columns or rows that match in width or height.
Related
I am trying to make a JS image cropper from scratch. I get the cropping part pretty much okay, but when I try to render the cropped section of the image into a canvas using drawImage(), the output displays only the top half of the image. Any idea what might be wrong?
CodePen link: https://codepen.io/virtuoso/full/MxrWrN
Found a solution from this post: canvas drawimage draw zoomed image
The problem was that I was changing the <canvas> element's style attribute to set its width and height, when I should have used its width and height attributes instead.
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.
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'm creating a slideshow with jQuery Cycle, and I need to be able to resize the images in the slideshow responsively with css. So far, cycle has been so controlling of the width and height of the images that I haven't been able to do it. I have been able to achieve the images resizing according to window width when I refresh the page, but the images won't dynamically resize when resizing the window. I'm trying to work out a solution in Javascript, but I'd really like to be able to get away with pure css.
jQuery Cycle is setting widths inline on the <img> tags. That's the first problem. I would try removing that, it looks like the options for Cycle has this value slideResize, try setting that to false or 0.
The next step would be setting a max-width on the container, and width: 100% on the imgs.
Just a suggestion - but you'll probably want to use something like JavaScript (or an AJAX service or something) to handle this because if you were to handle resizing the images within the browser that is going to put an incredible amount of strain on the browser to handle all of the resizing and scaling.
You may want to target specific resolutions and serve the images based on the "closest" viewport size accordingly.
you can set the width or height of the image related to a container
.container{width:200px}.container img {width:100%}
Hope this helps!
Set the img elements width to 100% and height to auto to take aspect ratio into account. If you don't want the image to be 100% of the browser, add a container element.
Your best bet to make a image responsive, this is without it being inside a container btw.
img {
width: 100%;
height: auto;
}
Now, it will stretch to the width of the page, but if its contained it will stretch to the width of the container, the thing to try is, making the container grow and shrink as well.
I have a image container(a div) with a set width and height.
now I got an image url from the backend and I need to put it in the container.
when the image is smaller than the container, I need to enlarge it to fullfill the container
when the image is bigger than the container, I need to center it in the container.
could this be done in pure CSS? or do I need to use JavaScript to do something?
You will need a mixture of css and javascript, here's an example I've created for you:
http://jsfiddle.net/7fUxw/1/
What about min-width:100px on the image, where the div is a width of 100px.