For an assignment I need to write about why various things work differently on my website when it comes to viewing it in different browsers. One of the differences I've found is that in IE10 where I made images smaller to fit on the page, IE ignores that and only scales the image with Width: %; Here is the code for the image:
<img class="image" src="images/tcp-ip layers.gif" />
.image {
display: block;
margin: 0 auto;
height: 30%;
width: 30%;
border: 1px solid #E5E4E2;
margin-top: 10px;
}
Does anyone know why IE doesn't scale down the image like Firefox would?
Edit: it works the same in Firefox as it does in Chrome, It's not good code I agree, I should of used auto's etc. But I just need to figure out why it resizes it differently in Firefox. (if anything IE10 resizes it better but its too late to make the amendments I should of)
Image scaling using bicubic interpolation is turned off in IE per default, every other browser has that on by default. Try to fix this with:
-ms-interpolation-mode: bicubic;
Related
I am building a site with a simple topbar that needs to fill the entire width of the browser window. What I have now works perfectly on desktop browsers, Android, any iPhone in portrait orientation, and older iPhones in landscape view. On iOS 16 though, in landscape mode it persists in leaving a gap at the edges of the window.
illustration of the problem
The page structure is real simple, there's a single #page_wrapper_div with everything else nested inside.
html {
all: unset;
position:relative;
}
body {
margin: 0;
padding: 0;
min-width: 320px;
}
#page_wrapper_div {
min-width: 320px;
width: 100%;
position: relative;
margin-left: auto;
margin-right: auto;
}
#topBar {
display: block;
position: relative;
}
I found a couple of posts from people who had what sounded like similar problems, which suggested I needed a viewport meta tag:
I have tried several variations of this, with and without an initial-scale=1.0 added in, and none of it makes any difference. It works correctly (i.e. the margins stretch to the edge of the window) in responsive design mode and on my own iPhone, I can only reproduce it on a physical iPhone running iOS 16, or in a hosted instance like BrowserStacks, so it's difficult to troubleshoot. Any suggestions?
I've been testing different DPRs using Chrome and Firefox dev tools, and it appears that changing the DPR has no obvious effect on the final render.
I tried multiple test cases, both real life photos and illustrations. I made sure that the resolution of the image I used was significantly less than what would be rendered on a 2x or 3x display. See example below and use the responsive tools in Chrome or Firefox dev tools to change the DPR. I set the width of the image to be 500px in CSS. The intrinsic resolution of the image is 520 x 720 pixels. So on a #3x device it should be scaling that image to 1500px wide, making it look blurry.
Does my display need to support a 3.0 pixel ratio in order to simulate it?
body {
background: #dddddd;
}
img {
width: 500px;
height: auto;
}
<img src="https://cdn.pixabay.com/photo/2013/07/13/11/34/apple-158419_960_720.png" alt="Red apple">
I believe you're looking for
body {
background: #dddddd;
}
img {
width: 100%;
height: auto;
}
I think that's it? it scales the photo up, to stop it from scaling up you'd have to use max-width/max-height and set it to the highest you want it to go to before the %tage cuts itself off.
I want to load a huge jpg with 48000x990px as background-image.
HTML:
<div id="car-canvas-wrapper">
<div id="car-canvas" style="background-image: url('http://via.placeholder.com/48000x320');"></div>
</div>
CSS
html,
body {
padding: 0;
margin: 0;
}
#car-canvas-wrapper {
width:100%;
position: relative;
}
#car-canvas {
background-size: cover;
width: 100%;
padding-top: 51.5625%;
}
You will find a example in CodePen: https://codepen.io/anon/pen/ypyMpZ
In Chrome, Edge, Internet Explorer and Safari everything works great. But in Firefox there are some heavy problems. Sometimes the image loads when i clean the cache. If its loads and i resize the window, the image disappear. In the inspector i see, after resize, that the background-image got 0x0px.
Obviously the picture is too big. Question: Why can all browsers except Firefox display the image?
Edit: I removed the huge image from my webserver and insert a placeholder image (48000x320px). Keep that in mind if you have a similar problem and read this thread.
Firefox fix on images could be more than just this simple solution but i have found this as a working solution on previous project.
Just add the following css:
#car-canvas-wrapper { display: block;}
Should do the trick.
Here is an example of a resized image showing the comparison between the original picture, the resized picture in Firefox, and the resized picture in Chrome:
Chrome seems to render the image fine, but the image in Firefox seems very pixelated.
This is my CSS:
img {
width: 48px;
height: 48px;
border-radius: 500px;
}
Anyone with any ideas?
It seems to be a configuration issue with the browser itself
Referencing:
https://support.mozilla.org/en-US/questions/965904
I'm trying to make a fluid website where you can see the website full screen on different size monitors,
For images, I'm using height:100% and Width:100%; everything looks OK in Firefox and Internet Explorer 8, but in Safari and Google Chrome the image gets distorted. Why does this happen?
<div id="main_wrapper">
<img id="main_bg" src="images/main-bg.jpg" />
<div id="main_content">
........
</div>
</div>
#main_bg {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
If by "distorted" you mean pixelized, it's a case of the browser not being very good at scaling up images. Good scaling like you might get from Photoshop is quite expensive, and some browsers implement much faster (but less smooth) scaling to keep rendering times down.