I have a div with a image I want to center inside. The image will be different everytime and has a max-width and max-height css property. Problem is, the image.onload function I use to do the math with the image.width and image.height, gives me the images dimensions before its scaled down by the browser. :( how can I pull this off?
If you mean that you have an image that is, say, 200x200 pixels, and has been resized to (say) 150x150 pixels because of the CSS properties, then image.width and image.height should work fine. That is, they should give you 150x150, and not 200x200. (See here for the mozilla reference.)
Alternately, you could try element.clientWidth and element.clientHeight (https://developer.mozilla.org/en/DOM/element.clientHeight), which give the rendered sizes of any DOM element.
I haven't tested this in IE, but it should work fine there as well. (The MSDN reference page for width is here. You can also find clientWidth there.)
What browser are you testing on?
Related
I'm resizing an image with setting the width/height dynamicly with css and using transform duration to smooth this process. However it is working but once the animation started the image gets pixelated. Occurs in Firefox and Chrome, i didnt test any other browsers.
Your height is fixed, before and after the resize, it could have something to do with it?
Try and amend the javascript to also set the final height of the div, if you want to maintain aspect ratio, see http://andrew.hedges.name/experiments/aspect_ratio/
from the initial 350x64 the final dimension should be 250x46
I've looked at a number of similar questions, and tried implementing those solutions, but I'm still having the same problem, I believe primarily because I have an additional complication (and the fact that my understanding of image manipulation is limited).
Here's the situation: in a web app I have a webcam picture capture (using getUserMedia). The <video> element which displays the feed, as well as the <canvas> are sized to 640 pixel width as default. This works fine on desktop browsers.
On devices with screen width under 700px, the site responsively resizes everything, including the picture capture dialog, which resizes to 95% of the screen width, thus the <video> element display the camera feed is less than 640px in width most of the time (those are the times that matter here). The video feed displays fine, you can see the entire camera field. But every you take a picture, it gets displayed on the canvas (which resizes the same as the video feed) clipped, depending on the size of the screen. That is to say, the canvas displays as much of the original image, which remains 640px wide, as it can.
I don't want to resize the actual image; I'd like the uploaded data at the end of the day to be a 640px image regardless of the screen width. I just want the user to be able to see the whole thing before s/he saves it.
I've already tried playing with width attribute (element attribute, not CSS) on the canvas, but that did nothing, and changing the width of the video display will shrink the actual image, so that's not what I want.
I also played with the drawImage method which should resizing, but I couldn't quite get what I wanted. This is the line I thought should work, but still gives me a clipped image:
if($(window).width()<701){
var ratio = videoHeight/videoWidth;
var canvasWidth = $(window).width()*.86; // calculated width after CSS resizing
context.drawImage(video, 0, 0,width,height,0,0,canvasWidth,canvasWidth*ratio);
}
Update
The following code will show the entire picture on the canvas, but shrinks it, and I get a much smaller image file, depending on the screen width it was taken on:
context.drawImage(video, 0, 0,canvasWidth,canvasWidth*ratio);
Many thanks!
I have been trying to make images resize proportionally, leaving whitespace, so they are always fully seen in the browser window without having to scroll. All of the solutions I have found so far can resize the image based on the browser window width, but if the proportions of the browser window don't match the image, then it will cut off the image and the user will have to scroll down to see the rest. I know that there is also background-size: cover; but I don't want the image to be clipped. Any ideas?
You can try vh and vw units in CSS. And accaptable by almost all browsers.
img{width:vw;height:vh;}
The drawback is image may shrink... So you can try with overflow hidden.
img{width:vh;height:vh;overflow:hidden;position:center;}
You want the object-fit: contain property if you're using <img>, or background-fit: contain if it's a CSS background-image.
http://codepen.io/robinrendle/pen/BywNVX
object-fit doesn't have perfect browser support, but there is a polyfill for it.
EDIT:
These issues appear to have been fixed by iOS8. Consider this issue an iOS7 and earlier bug.
I've got some content (subject to CORS) that I'm serving in an iframe, that I want to be always stretched across the bottom of the browser window. I need this content to keep the same aspect ratio and fill the entire width of the browser, otherwise things will look weird. Because I don't have access to the iframe's contents I'm using -webkit-transform: scale to properly size everything properly.
I'm calculating the scaleFactor:
width = 600; // this is the original width of the iframe's contents and never changes
scaleFactor = window.innerWidth/width;
Then I set some CSS based on that scaleFactor, whenever window.innerWidth changes size:
$container.css({
'width': (width * scaleFactor) + 'px',
'height': (height * scaleFactor) + 'px',
'padding': 0
});
$iframe.css({
'-webkit-transform': 'scale('+scaleFactor+')',
'transform': 'scale('+scaleFactor+')',
'-webkit-transform-origin': '0 0',
'transform-origin': '0 0'
});
This works perfectly everyplace except iOS where it starts to break down if you zoom in too far. The iFrame starts to drift off the page and isn't near wide enough. I have no clue what's going on here.
Images of what I'm talking about: Good scaling, Bad scaling.
I've got a test page setup here that clearly demonstrates the problem on any iOS.
Anybody have any ideas?
Here's the result of my extensive investigation before I gave up.
There are two major problems involved in applying transform: scale to content inside iframes on iOS. The first was what I pointed out in the original question, that content starts to drift away from it's specified location on the page if you are using fixed position elements. It works up to a point that seems to be based on the original size of the element, the scale factor, and presumably the viewport width. In my tests a large element might scale and position perfectly when scaled at any factor greater than 0.85. A small element might be positioned perfectly so long as the scale factor is at least >3.5. It seems almost random, so I didn't bother determining what the exact point was.
I didn't try this on relatively positioned elements, but I'm assuming they function similar to fixed position elements.
There is a rather kludgy workaround for this involving using absolutely positioned elements anchored to the bottom of the page using scroll offsets and innerHeight. i.e.:
container.css('top', (document.body.scrollTop + window.innerHeight - container.height()) + 'px');
container.css('left', document.body.scrollLeft);
And updating this on every drag, transform, pinch, resize, etc. There is some weirdness involved with this method (iOS doesn't update scroll offsets until after a drag has completely stopped) but it's workable if you absolutely had to do it.
However, even though that's a possibility, when you scale content inside iframes on iOS, if you have ANY anchor tags (or other elements that need to be clicked on), the clickable area stays unscaled. If you have an image in inside an anchor tag that's 200x100 and you scale it 2x, the image will be twice as big, but the anchor will only respond to the first 200x100. Using the iOS simulator, if you double click on an image outside the clickable area Safari is even helpful enough to darken the original bounds so you know where you could have clicked. It's pretty much a deal breaker if you want to display anything other than text/images that don't require clicking or other inputs. More information here:
CSS3 Transform scaling issue on IPad Safari
"-webkit-transform: scale(2)" doesn't affect click area of Facebook Like Button (on iPad)
Until Apple fixes these long standing bugs in mobile Safari, it seems that trying to scale iframe content using webkit-transform isn't a viable option unless you are only targeting Chrome.
Edit:
Demo of scaling issues here.
Combo of iframe, transform scale, and ios is tricky.
There are bugs with transform scale. Not always in your control.
You can try zoom property instead of scale, and use scale for firefox where its not supported.
I don't have ios here so I cant check but it often works wonders. Though you may have issues with line breaks in text with zoom.
zoom solves this bug in chrome
jsfiddle: http://jsfiddle.net/UenFN/. Notice the slight, brief pixelation after the animation. This error only happens in WebKit browsers.
Using jQuery, I have an image resize into a smaller one. The new dimensions are precisely half of the old ones. Right after resizing, however, the image appears slightly pixelated, then about 2 seconds later it looks better.
How can I fix this problem?
EDIT: Still no progress. Any idea is appreciated.
The solution is to enable the Hardware Acceleration in Webkit.
img {
-webkit-transform: translate3d(0, 0, 0);
}
I have a small library which resize image and HTML to always fit the parent div. Safari bugged me with its own unique way to do a quick and dirty pass before doing the bicubic one. Forcing the hardware acceleration solved the issue, In my case as I do a lot of resizing I do notice some performance degradation yet in the end the overhaul result is more appealing.
You can test this fix here: http://www.visualfox.me/app/nanjing-2014
Under Safari the image used as a mask is never pixelated, regardless of the resizing, upscale or downscale (just resize the browser to test it). You can compare that with this other demo which doesn't use the fix: http://www.visualfox.me/app/bold
Notice how the logo is temporally pixelated when you resize the browser.
my! enjoy!
I discovered that the only time it does not do it is when the size upon completion is the native image size.
from 150 to 300 pixels, no pixelation...
http://jsfiddle.net/UenFN/1/
and from 450 to 300 pixels, still no pixelation...
http://jsfiddle.net/UenFN/2/
So the fix, or workaround, would be to make sure your final size is the native image size wherever possible.
You could use an image appropriate to the dimensions you are going for.
If you can't do that then you could use a callback method to replace the resized image with an image that is the size of the new dimensions. What you are doing is no different than stretching an image (in fact thats exactly what you're doing) so there is going to be pixelation.
In order to fix this, I inserted the same image a second time, but with the dimensions I want to use. At the millisecond after the animation, I replace the main image with the previously hidden image.
jsfiddle: http://jsfiddle.net/wLwrc/1/
Solved in 2013. https://bugs.webkit.org/show_bug.cgi?id=74600
image-rendering: optimizeQuality;
I had the exact same problem. I changed the *.jpg that I was animating the size of, to a *.svg and the pixelation went away.