This is my use case:
I have a web page with a responsive design. The page is vertically split in two halves, on the right hand side I want to show an image (a PDF page rendered as PNG or JPG). The size of the image should change as soon as the window is resized.
I thought I already solved this. I render the image on the server to be big enough for the biggest possible window size (according to our company setup). Chrome and Firefox scale down (and interpolate) the image just fine.
But then there is Internet Explorer 10: If the image size is scaled down to anything beneath 100% it looks like a million flies randomly covering the image ... I cannot seem to find a solution for this.
I learned that in the ol' days (IE7) there used to be a CSS rule for this called -ms-interpolation-mode that could be set to bicubic. But this has been declared obsolete and is not available in IE9+
Do I have to accept it like that? How can this setting be called obsolete if there is no interpolation for scaled images in IE9+? Is there any solution for this?
I know: Usually you don't let your browser scale your images. But do you have a better solution for this use case?
EDIT: I should have mentioned that the images in question are black text on white background. The effect is better visible when using thin lined fonts in the image.
EDIT2: Please recheck the fiddle (http://jsfiddle.net/7grxut1t/16/) before you close this thread. If you resize to a very small size in Chrome and IE you will see the difference!
The relevant part of my code
<div>
<img src="http://websocket.bplaced.net/test.png"/>
</div>
CSS:
div {
position: relative;
width: 50%;
height: 100%;
}
img {
width: 100%;
}
Ok, I found a quite dirty, yet applicable workaround
The angular service from https://gist.github.com/fisch0920/37bac5e741eaec60e983 uses the canvas element to interpolate the image on-the-fly. It works for me in IE10 (I am not sure about IE9- though).
Its method imageService.resizeStep is amazingly fast in IE ... it renders noticeably faster than the native Firefox image interpolation rendering.
I don't really like it, but it works and it doesn't even slow down the user's workflow.
Related
I have many small icons in my website. Instead of loading all of them independently, I am thinking of using CSS sprites due to performance gain.
Consider the following code
<div style="width: 24px; height: 24px;background: url('img.png') -10px -10px;"></div>
vs
<img src="css-sprites.png" style="width: 24px;height: 24px;">
As expected, both gives same result. When loading as an image (second case), if I keep resolution of actual image a higher value, say 128*128, and using 24*24 for display, I am getting better resolution even when we zoom the page in browser (tested in mozilla).
But when using css sprites, since I have to keep the same display resolution in the sprite, the image gets blurred when zooming.
Is this expected behavior or am i doing something wrong? Is there any way to overcome this issue when using css sprites?
I do not have much experience with html and first time going to use css sprites. Please help.
Edit: also, many posts I could see in internet about cross-browser issues while zooming. Is this some point of concern even now?
If your sprite size is 200x200 px, and you want to get better resolution by zooming - make you background-size: 100px 100px;. So if you will zoom to 200% - the quality of you image will still be good. Obviously, your sprite image should be twice bigger the size you are going to use on your website. To avoid problems - do not mix % and px or any other different units in one background-size. Use only px in your case and everything will work just fine.
Summarizing. Make sprite twice bigger, set background-size twice smaller the size of sprite image. Tested it in Chrome and FF. Works fine on zooming.
If you are familiar with svg files - try to do your own vector font (for icons) using http://fontastic.me/. No scaling issues will disturb you. You can set size by font-size and make them any color by color in CSS, like a text.
I'm trying to use a canvas animation effect, it works well on firefox (desktop) but on mobile it fills like little space on top left corned of the page. On mobile chorome works well, updated my browser still not working, wonder if there is any trick making it work.
code
https://codepen.io/riazxrazor/pen/Gjomdp
here is the html file on separate server:
http://ntf.r-control.eu/canvas.html
Not posting code here, becouse it not display properly (goes out the code tag somehow)
Not able not to understand your doubt. But, you can try
canvas{
height: 100vh;
width: auto;
}
it will force your canvas to be the height and width of the viewport.
This is the weirdest thing I've ever seen.
I have a class of div that has a background-image, defined as such:
background-image: url("circle.png")
background-size: contain
You can see the divs here: Rouvou.com/fiction. They're called .circle-blue or .circle-red and both classes behave identically.
So here's where it gets weird: on a Lenovo ThinkCentre machine with a ThinkVision monitor, using Firefox, they "pulsate" rapidly, or grow by a pixel in width and height rightwards and downwards, and then shrink again, very rapidly, like a flicker.
Since the Lenovo is a school computer with only two browsers installed, the only other browser I could test it on was IE, in which this behavior was not found. I wish I could post video here to show it, but here's a screenshot of one of the divs:
I've tested it on almost every browser on many other types of machines, and the only place I've ever found this behavior was Firefox on a Lenovo ThinkCentre, with a ThinkVision monitor. I also tested like 20 different ThinkCentres, and this error displayed on every single one.
Has anyone run into anything like this before? What could possibly be causing it? Can anyone at least reproduce the problem on their machine/browser?
I'm using Firefox 31.0, if that matters.
I cannot test it without access to one of these machines, but after looking at your page, I can say with 99% certainty that the issue is actually the background-size: contain part of the rule below. Firefox was only beginning to support that with that browser version, and it may have still been a bit buggy.
(http://caniuse.com/#feat=background-img-opts)
The other thing that leads me to believe this is the case is when that rule is not applied, the background image expands to the right and down as you described.
The fix, since the size of these dots do not change when re-sizing the page, would be to re-size the image manually in Gimp or Photoshop to the correct size, and not try to do it on the fly. This little cleanup will make a minor improvement overall loading/rendering of the page as well.
If you do need the image to resize, your options are using an img tag with a width: 100%; height: auto and overlaying the text over the top, or making a larger image that just has the two-tone colors and the horizontal slash. I would probably just make this all a square image, then add that as the background-image with the position set at center/center (to keep the slash in the correct spot if you need to resize) and set a border-radius on the div to 50% of the div size, making it once again, a circle.
#category .category-thing .category-thing-right-wrapper-wrapper .category-thing-right-wrapper {
display: inline-block;
position: absolute;
width: 57px;
height: 57px;
background-size: contain;
}
I believe it's just the version of Firefox you are running. For example I had trouble with HTML 5 validation with Firefox. The version of Firefox with the graphical error was 22.0, when I viewed the same thing on my laptop, using version 38.0.1, it was in the correct place. I think Firefox was just slower to implement certain things and had no way of accomplishing certain aspects without updating the browser.
I think that the same thing is happening in your scenario. Whereby those images are stylised in such a way that your version of Firefox does not fully support; it tries it's best to show them to you but just can't do it properly.
I tested several of the css properties by going on respective w3schools pages and the only style that seemed to have any sort of graphical error was background-size:contain. However, this only happens on an even earlier version of Firefox, which may not be the same as the one you are running.
I went on this Firefox website and it says that you need:
a browser that supports scaling background images (such as Firefox 3.6 or later)
to use background-size:contain;.
Final answer: your version of Firefox does not fully support background-size:contain; so there are some visual errors.
Just a thought, don't know if it'll help since I can't test it on my machine but have you tried setting max-width and max-height on your divs? On inspecting them they only have width and height set.
Try setting them to the same width and height:
max-width: 57px;
max-height: 57px;
You could also try setting the min-height and min-width:
min-width: 57px;
min-height: 57px;
The images are originally 72x72, and you make the browser downscale them to 57x57, yet the GPU might correct the scaling to fit even boundaries (depending on the graphic card your machines have). If so, the rescaling might cause the parent element to resize in order to fit its contents (as you haven't specified the overflow behavior), which will in turn cause a recalculation of the contained element.
Solution: Render the background image as 57x57 taking into account that it will be even rounded, or - preferable if you can - render it as 56x56. You will also make the CSS a bit lighter :)
Can you just clear all the CSS loaded in your browser
CTRL+SHIFT+DELETE
I have a feeling too that there's more than one CSS files pointing to id of the div. You may also update your browser.
I am using firefox which from my research seems to be part of the problem. I specify in the <img> tag that the width should be 360 and the height 215 yet it makes the width 382 and the height 215. I checked and this maintains the original ratio which I am trying to break in my resize. Why does it do this and how do I make it stop? If I want to I should be able to make it have a height of 124358907 and a width of 1.
<img src="myfile.png" height="215" width="360" />
Then when I click on image properties it says that the width is 382 and based on how it looks compared to other images which resized correctly I can confirm that it is a tad too wide.
Firefox version 17.0.1
Just curious, is it in the WYSIWYG editor that the image isn't displaying correctly or is it actually in the browser? I remember having issues with that in older versions of Dreamweaver, certain things would display strangely in Dreamweaver's display, but when you actually open the HTML file in a browser, everything displays as it should. Same with the old Microsoft Front Page. I just use Sublime Text or Notepad++ now...
Seriously dude? Check this out, you can resize your img tag, you are probably doing something wrong at your side
Demo
CSS
img {
height: 15px;
width: 200px;
}
I want to display a collection of image thumbnails in a grid. The images will come in a variety of sizes, but I'd like to restrict the thumbnails to a particular size (let's say 200px wide and 150px tall).
What I'd like to find are some magical HTML markup and CSS rules that will
Allow the images to be included in normal <img> elements
Ensure that the thumbnails fit into their 200x150 pixel box, retain their proportions, and are centered in whichever dimension they overflow.
Not require JavaScript or specific knowledge of each image's actual dimensions
I'm not sure if this is possible. I can make a (bad) approximation of what I want with the following markup:
<div class="thumb">
<img src="360x450.jpeg">
</div>
and CSS:
.thumb {
width: 200px;
height: 150px;
overflow: hidden;
}
.thumb img {
min-width: 200px;
min-height: 150px;
width: 200px;
}
This attempt breaks in a variety of ways:
Images that are in portrait orientation will be sized correctly, but will overflow through the bottom of the container, resulting in vertically-off-center cropping.
Images that are wide and short will be distorted in the horizontal dimension because of the hard-coded width and min-height rules.
But without that hard-coded width, images that are larger than the minimum height and width will not be resized at all.
If it's at all helpful, I've put up an example that will (hopefully) illustrate what I'm trying to do, here:
http://overloaded.org/tmp/imgtest/
http://overloaded.org/tmp/imgtest/imgtest.zip
I know that I can solve this problem by omitting the <img> element altogether and instead pulling the thumbnails in as a centered background image on the containing element, but, if it's possible, I'd like to keep the <img> elements in the page.
Thanks for any help or pointers you can provide!
Edit: I suppose I should note that an ideal solution will work in IE 6+ and modern browsers, but any solution that works in IE 9+ and other modern browsers (recent WebKit, Gecko, etc.) will be gladly accepted.
You can (kind of) achieve this with the CSS3 background-size additions: contain and cover.
Live Demo
contain (top picture) fits the entire image, keeping aspect ratio. Nothing is cropped.
cover (bottom picture) fills the containing element either vertically or horizontally (depending on the image) and crops the rest.
Possible, probably.
Also, probably not the best idea. Your big issue to overcome here is orientation of thumbnails. What if you're dealing with a panorama? Certainly, shrinking it down is going to create a very unsightly "squished" image, as would a very tall image. It's rare that everyone deals in 4X3 or 16X9 100% of the time. So, you'll need a mechanism to pad out the image. Even if the ratio is correct, it's not going to resize as cleanly as you could with a program like Photoshop or Gimp.
The other major issue in this thought process is that you're going to be sending massive amounts of unnecessary data to the server via the larger images. It'll take longer to load, fill up the DOM unnecessarily, and overall just inhibit the UI experience.
There are a number of ways to get around this, none of them pure CSS. I've tackled this several times, each in a unique way based on the client. For one client that wanted things totally custom, it was a custom uploader, resizing via iMagick (part of image magic) and custom CSS/Javascript for the album with major interactivity. In another instance, I use Gallery as the backend--handling the thumbnail creation, uploading, titling, cropping, and organizing-- and then just pulled the reformatted image links out of the DB to display them in a more appealing manner. You could save yourself even more trouble and just use something like the Flickr api to pull images for your use.
Here's a tut on using ImageMagick to do thumbnails.
.thumb img {
max-width: 200px;
max-height: 150px;
min-width: 200px;
min-height: 150px;
}
Well I know for thumbs you would want it max and min if you want a smaller image to make it bigger and bigger image to make it smaller.
try to set max-width and height and not min because if the image is not exactly that size it will overflow :)