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;
}
Related
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.
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.
My Wordpress post tries to show an image with HTML code like this:
<a target="_blank" href="https://www.facebook.com/15925638948/posts/10152127553183949" hidefocus="true" style="outline: none;">
<img title="CBS Moving Forward With ‘How I Met Your Dad’" alt="" src="http://ia.media-imdb.com/images/M/MV5BMTA5MzAzNTcyNjZeQTJeQWpwZ15BbWU3MDUyMzE1MTk#._V1._SY317_.jpg" width="620" align="">
</a>
However, the image cannot be displayed. Chrome & Safari shows a white box with a small image in the middle (the case that the image cannot be displayed). Firefox shows nothing for the image part but a blank line.
If I remove this line
width="620"
the image displays.
What's the rule about this width and the actual image width? It seems working fine for most cases but not for smaller images? How do I dynamically change the width to best fit my design?
It actually works fine for me (in all browsers). My guess would be that since no height was specified, the browser was interpreting it as 0. This explains the way in which Firefox was rendering the image, but not the others. There is also the possibility that some other code (from the theme, a plugin, or elsewhere) is interfering.
Well one thing you may not know is the % function usable in HTML for many things.
for example using this code:
...
width:50%;
...
would allow the width of the child object to be 50% of that of the parent object.
I think my problem is related to this question
Image getting 403 forbidden when deployed to server
It's not about the width, sorry for the misleading.
I'm making a page to scale down to fairly small browser sizes, including on desktops. I've got it down for pretty much every browser but firefox; it just doesn't make the content smaller the same way as other browsers.
Say I have a simple page like this:
<body>
<div style="width:auto; max-width:500px; margin:20px;background-color:black;"> Some filler text </div>
</body>
If you try that in any browser but firefox, when you resize the window to smaller than 540px, the div gets smaller, as you would expect. But in firefox, it does no such thing. At least not in 8.0. It resizes the div a tiny amount and then lets it extend off the window, without even leaving a scrollbar.
Is there any way around this behavior?
EDIT: I've reproduced this is on older versions of firefox as well, but I found something odd. When I said it resizes the div a tiny amount, here's what happens: the body of the page stays at 367px width. Two different versions of firefox, two versions of windows, the same number.
The issue you're running into is that in Firefox depending on the exact themes or extensions in use as you resize the browser window the browser content area may not resize (because, for example, the various buttons on the widest toolbar impose a minimum width on that content area due to the way the user interface is laid out).
This is why you see the body not changing size: the CSS viewport itself is not changing size. If your page had a vertical scrollbar, you'd see that scrollbar disappear off the right edge of the window, just like parts of the browser UI itself disappear.
You can work around this with enough toolbar customization (e.g. remove everything from the toolbars) if you just need this for testing. On the other hand if you just need this for testing you can probably jut load the site in an iframe which you then size however you want...
Wanted to say something about your comment regarding "width: auto" vs "width: 100%" but I can't comment yet...
You can set "width: 100%" and make it account for padding and borders by also setting "box-sizing: border-box" - you'll need to use the vendor prefixes I believe -moz- and -webkit-. Not sure if it will solve you problem, but it's good to know - maybe try it out and see what happens.
If you take the following image:
http://ecx.images-amazon.com/images/I/41uxky7oT8L._SL160_.jpg
place it in an html file with an IMG tag, then resize it to width 160 but do not set the height setting, and are on Firefox, you will see an ugly black line under the image.
For instance:
<img src="http://ecx.images-amazon.com/images/I/41uxky7oT8L._SL160_.jpg" alt="" width="160" />
or
<img src="http://ecx.images-amazon.com/images/I/41uxky7oT8L._SL160_.jpg" alt="" style="width:160px;" />
(Note I'm using FF 3.6.3 on Ubuntu Linux 8.04 LTS, if that matters.)
Note I don't want to set height because then the image would look funny when all I want to do is change the width so that fits nicely in a column of amazon products. Plus, I cannot always accurately predict the image height, and some APIs to inspect the image may slow a website down too much.
So, why do you think the black line appears, and what can I do programmatically in the HTML or CSS to prevent it? Note I've already tried setting the style of background-color for the image to #FFF and I still get this issue.
Resize the image with JavaScript as needed to prevent distortion by the browser. I do it because only Opera and Chrome "smooth resize" large images to tiny sizes.