I have a conceptual question about photo galleries like this:
http://www.nikesh.me/demo/image-hover.html
If you open this in a browser that supports CSS Transitions (for example Chrome), it will smoothly scale the hovered image whilst the zoomed version remains of a high quality.
This is accomplished by showing the non-zoomed images into a slightly smaller version than they really are, in essence the zoom shows them in their true dimensions.
So, normal images are first scaled down:
-webkit-transform:scale(0.8);
And then upon hover scaled up:
-webkit-transform:scale(1.2);
My question: How is the initial scaling down supposed to work for browsers that do not support this method of scaling down? Try opening that gallery in IE to see what I mean, it shows the images not scaled down, which makes them too large and thereby they break the layout.
What I want:
The full effect in browsers that support it. Important is that the zoomed version remains quality.
No effect at all for browsers that do not support it, yet a solid original dimension so that no layout is broken
It should work for both image orientations and there may be variety in image widths and heights too
Anyone? Preferably an elegant solution that does not need browser sniffing or javascript, but all answers are welcome.
If you are wanting it to work without the use of javascript then it seems the only method you have is to forgo the initial scale down with css. You will want to do this in the "antiquated" way of adjusting the width and height of the image in the markup.
<img src="yourImageSrc" width="80%" height="80%">
This would allow you to still keep your layout in tact if the user agent is not up to date.
** I don't know if the percentage works in the literal height/width definition. But you can always figure out the ratio you need and plug it in.
Related
I am on a team trying to convert our Flash Application into HTML5 and Css, and I am running into a bug affecting WebKit and wanted some help trying to figure it out. The basic idea is that there is a table with a single cell with a background image and a background color and for whatever reason when the image is exactly the right size background-size: 100% 100% the image actually shrinks to reveal the background color. This also repeats if I use pixel values instead of % values.
Before anyone tells me to just use a div (since its only one cell anyway), this content is authored by other people who are using an existing tool to create a custom xml document that gives us tables and I have to get my solution to work on the pre-existing content we already have.
This is the fiddle which shows it and follows are image in various browsers:
http://jsfiddle.net/CEvnx/2/
Flash (Reference)
Firefox (working)
Chrome (the image shrinks)
Safari (the image grows)
P.S. Ignore the height and font differences as those aren't in any way relevant to the problem.
has to do with the table's border-width, if you set border-width at 2px or less the background sizes correct (in Chrome/Safari). Quite strange that Chrome shrinks and Safari grows. There must be some odd math or image resize logic in webkit and probably worth submitting a bug report.
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/
I have an zoomable image in the website. When the image is zoomed out to a large extend it appears very SHARP and ugly.
I tried using image-rendering : opimizequality, optimizespeed CSS but did not work.
Is there any other way out.
Thanks
According to image-rendering on MDC, image-rendering is currently only supported in Firefox 3.6. A similar property, -ms-interpolation-mode, is available for IE7 and IE8. Other browsers don't seem to have this feature (yet).
As latze mentioned, your best bet is to edit the image itself, scaling it to the level you need. I'm not sure, but you may try using <canvas> to perform the interpolation you desire.
I would simply edit the picture instead of the CSS.
Try making the picture slightly larger step by step while you make sure the picture doesn't (as we call it in danish, not sure if it correct english) "pixelate".
This can be done in various image editing programs from The Gimp-shop to Photoshop.
Images aren't meant to be resized that much. Think about an image as a graph where each pixel is a single square in the graph. If you stretch the image out, you're essentially making the pixels stretch out. Some programs try to fill in these pixels with what they think would fit there, others just make the pixel bigger, and others just fill in the surrounding areas with the same pixels to give it a sort of glowish effect. Resizing images down, while it tends to work better, also creates the same effect, because you're just chopping off pixels instead of adding them. Most programs that I've seen will squish pixels together, combining whichever colors were in those pixels. If you have a high detail image, then chopping off pixels is going to make it look horrible. There are no really safe ways to determine which pixels need to be retained to keep the overall image in tact. Most websites that have zoom features have a much larger image which has been resized down and they let you zoom to view the details of the larger image. Some even get separate images of the massive detailed one and the smaller preview one.
If we make fluid layout we can use em or % for font and div width and height to make fluid but how to make images resizable?
I want to make one layout for all sizes and devices
Joel Spolsky managed to find a very easy solution (a small proprietary CSS definition for IE). He found the solution here.
There's no simple solution for this. You can use flexible units for the images just like you can your other page elements. But this will result in inefficiencies and aesthetic issues including excess file size for a tiny image (if you're sizing it down), pixellation of sized-up images, etc. So what you likely want is to start with a large image and scale down to the appropriate size versions, and use Javascript to write out a tag referring to the correct size image depending on context.
Well you can size images relative to the viewport width (eg. img.thing { width: 50%; }, but you don't generally want to. Scaled images will at best (when the browser does bicubic resizing) look a bit blurry, and at worst totally blocky/jaggy (nearest neighbour resizing). You can include some CSS (SVG's image-rendering will be supported for HTML in Firefox 3.6; -ms-interpolation-mode in IE) to try to coax the browsers to use the better scaling mode, but it's far from reliable and still the best rendering isn't that great.
In addition, CSS background-images cannot be resized at all (yet; it is proposed for CSS3 but you'll have a long wait).
Liquid layout generally aims to adjust the distances between fixed-size images to respond to changes in viewport width, rather than scale the whole page including images. The user can, at least in modern browsers, zoom the whole page including images themselves, taking the image quality hit if they need to.
I reckon you will have to make use of the canvas element from HTML5. Or you could have some JavaScript that sets the size of the image tag but you would have to do some math to figure out the correct proportions.
Specifically, how do I predict/calculate the effect any of the browsers' zoom will have, for example, on width:950px? Are there any tools I can use to determine the new widths?
edit:
If I have a 950px div that is visually rendered 875px in, say, chrome, I could say chrome reduces fixed widths by approx. 92.1% after one crtl-. (950*.921= approx .875).
Try Firebug
Its an excellent plugin for Firefox, which lets you view variety of parameters.
You could play around with it and it would probably solve your problem.