We're having a problem when an image (logo) is resized in WebKit, it is jagged for a couple of seconds. We've tried resizing it both by changing width in CSS and using scale transformation. Is there any way to fix this?
http://codepen.io/Znarkus/pen/xbxKLK
Example HTML:
<div>
<img src="http://i.imgur.com/LoN4Mnz.png">
</div>
CSS:
div {
width: 300px;
height: 100px;
background: #ddd;
}
img {
max-width: 100%;
}
div:hover img {
width: 200px;
}
It seems to be a problem with the antialiasing of the images which has a short delay. My searches did not yield any good answers on how to solve this, so I've come up with two possible solutions.
Solution 1
Keep two versions of the image pre-rendered, then switch between the different sizes.
Pros: Perfect rendering
Cons: Takes more memory
Solution 2
User the image-rendering CSS property to disable antialiasing. By adding image-rendering: [browser specific see codepen fork]; to the div, you can see that the rendering of the image isn't as good as without antialiasing.
Pros: All CSS, no extra memory consumption
Cons: Lesser image quality
http://codepen.io/anon/pen/XJWrvJ
EDIT: Solution 3
On second though, there might be a different solution. Images aren't particulary great for rendering text, but since it's a logo I'm guessing you have some kind of special twist on the text or styling. If you can export the logo as svg and render it in a canvas you might be able to get around these problems.
Related
I'm admittedly not a fan of CSS and I hate even more responsive layouts but I'm creating an UI with Bootstrap (version 4, for what matters) in which I have some absolutely positioned elements that aren't exactly perfectly aligned as I want, be it in different native resolutions (monitor or VGA-defined) or when simply resizing the viewport (i.e.Ctrl++).
Since I began to create this UI I'm using vh and vw units for most elements (except those related to Bootstrap Grid, of course) thinking I wouldn't have such problem and this decision worked quite well for most of scenarios.
However, until now, I was using an old and very small monitor (1366x768) and recently I (finally) acquired a 21.5" monitor (FullHD, if this matters) and these values I've defined in my CSS rules, after exhaustive testings, are now slightly mispositioned, a bit to the left or to the top. For example:
This is a UUID I use for Unique User Identification in the Application and its positioning and text sizing was defined according to the rules below:
#user-identification {
bottom: 2.05vh;
font-size: 0.64vw;
height: 4vh;
left: 3.05vw;
width: 15vw;
}
As you may have noticed, the blueish background is in fact an image and the text is absolutely positioned on top of it, so I can reuse it for different use cases.
These rules created while developing in the small monitor where enough to center the text in the box of this background image. But now, in the bigger monitor I took this screenshot, you can see that the text is aligned to the left. It may be difficult to notice, I know, but this is a crop of the bigger picture which, unfortunately, I cannot show more :(
Well, I was about to start fixing all issues based on the big screen, for example, by changing the left to 3.4vw instead, but then I realized that if for any reason someone accessing the website is under the same situation I was before, the user experience would be prejudiced.
The first solution that came to me was to use Media Queries but I don't know the values I should be using to create the rules.
Worse! Regarding the viewport resizing, Firefox goes 10% by 10% while Chrome has a wider range (25%, 33%, 50% 67%...) and other browsers may have other values. And because I'm not a specialist I don't know the values I'm looking for to create the rules.
Can anyone help me?
Although it would be awesome, it's not my intention to fit the whole UI in the viewport of, for example, an iPhone 5 (the smallest I've found on Chrome Developer Tool with 568x320). I just don't want these small icons and texts absolutely positioned to be out of place.
[EDIT]
Describe the scenario in a Fiddle proved harder than I thought, that's why I tried to avoid it. But as asked, in this one I've positioned as best as I could and it looked good in the default preview area. But just by resizing it text already goes way out of positioning.
So I made this one, specifically for the embedded version. I believe it would be better as it's close to have the editor in one window and the preview in another (browser).
However, neither of them truly reflects what I really have. although the markup is compatible, both <img> and <span> inside the <figure>, I don't have these drastic changes when resizing the viewport. I have only small mispositionings on bottom and left.
I'm probably not extracting everything I should. I've got most of the Grid where this image (or the bigger, complete version of it) is located. .box is not relevant as it's just a few lines with linear and radial gradients and some box-shadow.
The whole UI is complex and I may have left something out of these Fiddles, but at least is something visual that shows positioning going wild when resizing (and definitely in different resolutions). My apologies for that.
This is the root of the problem to my understanding. There is an increase in height of the <span> element tied to the height of viewport, so the text container which is the <span> element is increased in height at the same time that the position of it via bottom and left are adjusted using viewport width/height. Removing the height setting of your elements in css, might solve the issues that you are having. Please leave a comment below, if this is not the solution to your question, and we can work together to the solution that fits this case. Thank you.
html, body {
font-size: 1rem;
height: 100%;
}
figure {
display: flex;
position: relative;
z-index: 1;
}
img {
height: 100%;
}
span {
bottom: 3.5vh;
color: #FFF;
font-size: 1.9vw;
/* height: 4vh; No need for this line right here. */
left: 1.1vw;
position: absolute;
text-shadow: 2px 2px 0px rgba( 0, 0, 0, 0.5 );
text-transform: uppercase;
width: 37vw;
z-index: 2;
}
<figure>
<img src="http://nick.mtvnimages.com/nick/promos-thumbs/videos/spongebob-squarepants/rainbow-meme-video/spongebob-rainbow-meme-video-16x9.jpg?quality=0.60" />
<span>f51bbe1e-7445-4545-bb84-15e614a119a2</span>
</figure>
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.
I'm currently working on a website. I noticed some elements are beeing cut off, if viewed in Firefox. I attached an Image, showing the problem.
The image below is a jsfiddle Screenshot from Firefox.
The code reproducing it is located here: JSFIDDLE
It's just an image, with an percantage value set with CSS.
.image-percent {
width: 30%;
}
The weird thing is, sometimes I am able to reproduce the bug and sometimes it simply vanishes after adding random HTML-Elements or other CSS-Properties.
Anyone already experiences this behaviour or know a workaround, forcing Firefox to resize the image the right way?
Actually found the solution in this thread Firefox blurs an image when scaled through external CSS or inline style.
Firefox implemented non-standart css property image-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
Playing with different values this solution gives more or less appropriate result:
image-rendering:optimizeQuality;
http://jsfiddle.net/jGKkB/
You need to add the max-width property. this should fix it.
.image-percent {
width: 30%;
max-width: 100%;
}
Just for testing. try this:
.image-percent {
max-width: 100%;
height: auto;
width: auto;
}
Hope that's it.
Basically, your image resolution is very high and you are trying to display it in 30% width.
So your image's pixels is not showing properly. Whenever you show the large image to small or small image to large this will be happened.
You can create an another image with desired width.
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 :)
I have a 3-column table which contains images. All td's have width="33%", and the images contained have CSS width:100%. In FF and Opera, the images scale like I want them to, i.e. fill the entire width of the cell, maintaining their aspect ratio. However, in IE7, they behave quite differently: I think the pic with the largest width stretches the entire column, and the smaller ones are stretched up to the new available width.
The page in question is: http://mybgagent.com/print.php?offers_id=4515
(I know the site is a mess, I didn't code it)
Any advice on what to do? Setting css position:absolute makes images scale correctly in IE, but breaks scaling in Opera and FF, as well as positioning in all browsers.
I ran into this issue a lot with IE7 "compatibility" mode. the easy fix was to not only put
width: 100%;
in my css, but also
width: 100%;
float: left;
cleared that nasty hiccup right up.
Sounds like you have a solution for each browser but no way to target it, well here comes the CSS Browser Selector to help you with that! Just plug in this jQuery to your site (in the <head> section), then write separate rules for IE and the real browsers and append .ie before your IE selectors :)
Works great, I use it all the time!
Example:
myTd
{
background: #f00; /*whatever your rules are*/
}
.ie .myTdv
{
position: absolute;
}
And that's it!
Try setting the style of the parent cell to position:relative.