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
Related
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.
morning,
Question regarding layout shift in Chrome with background image.
Page is: http://tcia.org/TCIExpo/2017_Attendees/TCIExpo/Attendees/2017_Attendees.aspx
Fixed full width page background shifts slightly as if it is resizing, width-wise, when loading new page but only in Chrome. FF, IE is fine.
I've tried everything I could find far as adding to/altering CSS goes but no luck.
CSS:
body
{
font-size: 17px;
background: url(https://www.tcia.org/images/TCIExpo/backgrounds/back-a3.jpg)
top center no-repeat;background-attachment: fixed;
background-color: #aaba59;
width: 100%;
height: 100%;
position: absolute;
}
I'd really appreciate suggestions. Thank you.
Bob H
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;
I want to resize widescreen/highscreen images proportionally so they fit a square-thumbnail-div and don't become distorted.
I tried it this way in my stylesheet:
.PicsNav img {
max-width: 74;
height: auto;
max-height:74;
width:auto;}
Works fine in both Chrome and Safari but Firefox doesn't handle it correctly. The Pics won't be resized - instead they are shown in full size one above the other.
You'll have to add a unit when setting a width and height. I'm guessing you want 74 pixels?
.PicsNav img {
max-width: 74px;
height: auto;
max-height:74px;
width:auto;
}