Hi i am having some troubles while trying to "fit" an image inside a css grid container (The problem only happends while using Safari, Firefox and Chrome is ok.) Problem is, the img height while using Safari takes all the available space and this makes the image looks deformed (Below is the link to the screenshot I took)
These are the properties I am applying to the image:
img {
flex-basis: calc(66.67% - 3.6rem);
width: 66.67%;
margin: 0 auto;
}
Link to screenshot
You may try re-defining the height of the image as the same problem occurred with me and by re-defining, it worked for me on safari. And also instead of giving the width and height in percentage, give it in pixels as it will be more convenient.
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 working on creating a fallback image inside of my class that creates responsive images, but I am stuck with trying to fix a problem for IE. Since I cannot use things like <source>, object-fit and srcset I am up against a challenge. The image is placed underneath the content so it will size to the height of the div content. The image should cover the whole background of the div that contains the content, but the problem is that the width presses the image to this compact size that looks awful:
I will provide you with a jsfiddle: https://jsfiddle.net/6Lxwesvf/7/ .
I made a copy of one of the wrappers it does exactly what it does inside of the IE. So I hope someone knows something about making the image not look all pressed by the width.
Change this
height: 100%;
to this:
min-height: 100%;
min-width: 100%;
margin: auto;
Working pen: https://codepen.io/sidhanshu28/pen/ERNwxz
I have a few charts on a page, each in its own bordered box. All charts on first page load exceed the width of their parent.
If I resize the page width slightly, it all goes back to how it should be. The strange thing is this is showing up only on latest Chrome version. Safari an FF are working well.
Another strange issue is that if I empty cache and hard reload in Chrome, it loads OK. Refresh the page, and the charts bleed to the right of their container.
I have tried this CSS from research:
.highcharts-container {
width:100% !important;
height:100% !important;
}
But this screws up the tooltip on Chrome and other browsers too.
Any sugegstions welcome.
in addition to your rest of css apply max-width: 100%; to your div like below
.highcharts-container {
max-width:100%;
}
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.
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 :)