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.
Related
Hi I built a site and everything seems to be working except the main Hero image shows up stretched on IOS devices. When I use dev tools to emulate these devices I don't have any issues, just on the actual devices. I have not had any issues with Android devices or desktop.
code https://github.com/sawyer1776/whale-animation
screenshot of stretched image
I'm not really sure where to start trouble shooting since when I try to simulate these devices with dev tools everything looks fine.
try this:
Give The section the height of 100vh and the hero content height 100%
hero-section {
height: 100vh;
}
.hero-content {
background-image: linear-gradient( to bottom, #04062e00, #04062e1e, #04062e86, #04062e ), url(../img/hero-bg.jpg);
background-size: cover;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
I found the answer here: Image stretching out only on iPhone x
sorry I thought I had searched extensively
Defining a width fixed the issue. Notably the issue was occurring on IOS devices across multiple browsers, not just Safari
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.
So I am building a nav menu that ,when opened, reveals your menu as well as your name, email and your profile picture.The problem I am facing is that when users upload their profile pictures (which often differ in width and height) and using a border radius, I get undesirable results. What would look fine on desktop, looks horrible on mobile.
See code below:
$menu = "<nav id='menu'>
<ul>
<li><table border='0' width='100%%'>
<tr>
<td rowspan='2' style='width:30%;height:100%;padding-bottom:5px;padding-left:5px;'><div style=\"display: inline-block;
width: 100%;
height: 150px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-image:url('" .$mem_avatar."')\"></div></td>
<td style='70%; padding-left:5px;'><ul><li><h2>$mem_name $mem_surname</h2></li><li ><h4>$mem_email</h4></li></ul></td>
</tr>
</table>
I would like to fix it so that when someone uploads their picture, it will display properly on both desktop and mobile platforms.The above will work fine on a picture on desktop but would be terribly squashed on mobile. I have tried using the width: 10vw height:10vw and this would also look fine on desktop but way to small on mobile. When making the value higher, the result would be a reverse, what looks good on mobile would look horrible on desktop
Use Bootstrap, instead of common CSS.
It will provide you, ready-made classes as per your requirements.
In Bootstrap, responsive images automatically adjust to fit the size of the screen.
Create responsive images by adding an .img-responsive class to the <img> tag. The image will then scale nicely to the parent element.
The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image:
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
Hope it helps you.
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;