Have a look a this url:
http://www.preen.me/product/1113142/
The product box on the left has the class product_pic, and contains an img tag with these CSS attributes:
max-width: 100%;
max-height: 100%
This is to ensure that the image fits proportionally in the box.
It works perfectly in Chrome, Firefox and all other proper modern browsers on PC:
It does not work in mobile Safari. Specifically, if you try to look at this page on an iPad in landscape mode the image simply disappears:
I think this is a rendering issue in mobile Safari but I'm at a loss as to how to solve it. Removing either one of the max-width\max-life properties brings back the image, but obviously without the required functionality. How can I go around this?
As I remember it, this is fixed by setting html/body tag to width/height 100%.
html,body{
width: 100%;
height: 100%;
}
And don't forget to set all divs up to the div where it should have effecto to width/height 100%.
Also you can try to set the html,body to position: relative. I'm no longer sure about this one.
A few suggestions. Other than playing with "overflow:hidden", you can try adding default values for width and height or simply play around by using "width:auto" or "height:auto" or both. You may also want to set "float:left".
Hope this solves your problem (at least partially).
happy coding :)
Related
I've been searching in other questions since this is a pretty common problem but none of them applied to my case.
I'm developing a small web app with React, just to get the basics, and the background img works fine in mobile view (there's a media query that changes it at 480px to a portrait one) it resizes from 480px to 320 and looks good.
The problem is that, at certain heights if you stretch or wide the window the background gets stucked in the middle of it (if you recharge the page it appears as it should, being the window in the same exact place as where the problem occurs).
The img is loaded through CSS in the html, If I remove the background-size property it works as expected in desktop and mobile, but when I cross the 1260px width it doesnt cover the full width.
I have this codesandbox with all my code: https://codesandbox.io/s/stoic-brahmagupta-ro2kb?file=/src/style.css
And I attach an image of the problem. Thanks in advance.
As u r testing this you can see the content of the App is overflowing the html element
I rather use min-height on global elements like body or html than static height to prevent such as cases.
So to fix it you just simply add
html {
height: auto;
min-height: 100vh;
To prevent not overflowing instead of scaling we just add min-height equaly of 100vh (viewport height).
I think it will propably do the job without height: auto; but i like add it to prevent even more edge casing
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 have a website that is using a div to display a background image across the screen, I have nothing in the div, but I am specifying a height.
My code looks like:
<div id="nav">
<!-- -->
</div>
My css looks like:
/* Navigation */
#nav {
background: url("images/bgnav.png") repeat-x;
height: 116px;
position: relative;
z-index: 1;
}
what I don't understand is the fact that in Safari and FireFox the background image spans the width of my browser, but in IE8 it stops after about 1000px or so and it's not in another div...it's all by itself and there is no other code than what I posted. It'll go longer if I specify a width in pixels, but if I don't specify a width or if the width is in a percentage like 100% it doesn't work. I also tried to set a min-width to the width of the image, but that didn't work either.
Any ideas...this seems to only affect IE8. I tested on multiple machines that are both running IE8 and they both have the same issue, so there is no browser cache going on here.
Thanks,
Josh
I took #Zaf Khan's advice and reworked my website to be compliant with a smaller screen resolution. I did like the original code, but I'm glad I changed it because I have optimized it for more screen sizes :-) and even though it looks a little different than before it functions much better!
Thanks,
Josh
On http://phoenixprints.org/viewpicture.php?pid=258 the main picture stretches vertically and looks bad. I don't know why its happening at all, and seems to only happen sometime. This does not happen on all pictures, and is puzzling me.
I'm running 18.0.1025.151 (Developer Build 130497 Linux) Built on Ubuntu 12.04 on chromium and it does not happen.
19.0.1084.56 m google chrome on windows xp it does?
You set the image height to 100% with this style:
.viewimg img {
width: 100%;
height: 100%;
}
None of the parent elements seemed to have an explicit height given, so WebKit (Mac/Safari in my case) probably chose the window's height as a reference for calculating percentages.
In firefox it only works because it seems to completely ignore the height: 100% part. Try it with some other values, and you will see.
My solution would be simply removing the height: 100% from the css, browsers should (in theory) resize the image by keeping its normal aspect ratio.
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.