I need my site to be able to resize and crop an image based on the viewport on a browser. I've so far managed to dynamically resize it with an imagemap, but can't seem to crop it dynamically. I'd like it to crop and scale simultaneously without distorting an image. The image I'm using is 1920x1080 which is far bigger than most browsers so cropping the edges while scaling would make it appear similar on different browsers.
I use this jQuery plugin quite often. :)
http://srobbin.com/blog/jquery-plugins/jquery-backstretch/
It sounds like you can already detect the viewport size somehow. You just need the CSS or javascript to crop an image. In that case, I'd recommend this article:
http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
You could
1) Use negative margins.
2) Absolute position the image in a smart way.
3) Use the CSS clip property.
Related
So I have YouTube video thumbnails displayed on a website, but they seem to have letterboxing at the top and bottom. I need to crop this, but I can't just crop x many pixels because of the reponsive design.
How would I crop images dynamically based on their width? Would I have to do it using Javascript during resize? Or is there a simpler approach?
I had a similar issue. I solved it by drawing the image to a canvas, iterating through rows of pixels and checking if they were black. The first time a colored pixel was detected marked the edge of the letterbox. I used this information to crop the image and draw it to another canvas.
It's not a perfect solution, but it worked for me. I hope this helps.
You can use object-fit css but it's not full browser compatible, however a polyfill exist
Else you can use div with background-image and background-size with cover or contain, that have a better support
So I am pretty new to this but I am wondering for a web page that has a big image in the middle like github:windows page, how would do you work with the image inside that div/area depending on the screen size? is there a way to get images to resize or be cut off depending on either window size or screen size? is it typical practice to use media queries to change the picture based on the device? How is this done in css (can I reselect src in css for the img tag)? do you have to use a window resize js event to continually re-check like masonry?
I know these are quite a few questions (sorry) but I am really just looking for advice on best practice approach as again I am new to this....
always appreciated!
Adaptive Images may be what you are looking for. It offers dynamic resizing and caching of images based on screen size. It's very easy to implement and has very few dependencies.
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
I'm trying to make the background image as professional as possible so I'm thinking it's best to resize it based on the size of the browser or the resolution (not sure what's usually used, but I think browser size makes sense here). The idea is if the viewer screen is small, the background image gets smaller, and as the screen gets bigger, the image expands to fit its maximum size.
I will try a CSS or even Javascript (JQuery) solution as needed.
I guess you're looking for something like that:
http://css-tricks.com/how-to-resizeable-background-image/
You will need to stick to CSS 3 background-size property to achieve this: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
Without using CSS 3 you cannot resize the background image in any way on the client.
So I have a grid of images (map tiles) and I draw a semi-transparent mask over it using an absolutely positioned div with width and height set to 100%.
I now want the user to be able to draw out a rectangle on the mask, with the mouse using mouse-down, drag, mouse-up. The rectangle would be drawn dynamically as the mouse moves, and the rectangle would be like a window through the mask displaying the map tiles underneath with no semi-transparency.
I'm currently looking at using 5 divs - one for the window and 4 for the mask which would be resized using javascript as I drag the mouse. Does anyone know an easier way to do this ? I'm using jquery and I need to support IE7 upwards so html5 only technology is out.
Cheers,
Colm
I think the jQuery Crop plugin does exactly what you need (Demo here).
Maybe it's possible to carve that part out from it.
You should try out SVG canvas instead. There's a SVG js library, good for beginner:
http://raphaeljs.com/, check it out
PLEASE NOTE THAT THIS HAS NOTHING TO DO WITH HTML5 (PLEASE DONT MIX UP WITH HTML5 CANVAS, THIS IS SVG)