I have an image with height 100% and width auto. It should always be square and never skewed. If you resize your browser to make the website less tall, the image gets skewed. While skewed you can open the inspector and uncheck height 100% then re-check it and the image will snap back to square.
<html>
<body>
<div id=outer style='height:100vh'>
<div style='height:50%'>
<img style='height:100%;' src='https://i.pinimg.com/236x/0f/9a/36/0f9a36457c046fe12c2c69ad60a3e737--creative-thinking-texture.jpg' />
</div>
</div>
</body>
</html>
https://jsfiddle.net/auey41fd/
This is really messing up my site for chrome users. Does anyone know a good work around? It doesn't only happen when the user resizes the browser. Any time the outer container becomes less tall, the images inside get skewed. It's not specific to using vh units. Everything works fine in firefox and IE.
Change height to min-height. That should fix your issue.
Put display: flex; on the image so it stays the same.
This bug was confirmed by Chromium.
https://bugs.chromium.org/p/chromium/issues/detail?id=773445#c16
After over a year of not trying to fix it they recoded something and inadvertently fixed it.
Related
I noticed today a strange behavior of Firefox, which I can not explain. An element (img) which is inside a div box and has a height : 50% will not be half the size of the parent.
Instead it has a size of only 2 - 3 px (the parent is at least 80px high at my resolution). In Chrome everything is displayed as expected.
HTML Code:
CSS:
Have also searched for this behavior on google. The only thing I found was a firefox setting (about:config browser.enable_automatic_image_resizing) for automatic scaling of graphics. But this did not fix the problem.
Thanks for your help!
I'm working on this page and I'm having a issue with the DIV where sliders are. This div#home-slider has a height: 350px as you may notice and it works fine for large resolutions but since the page is responsive, when I resize the window or see the page from a tablet or smartphone a white row appears just below the sliders and it's caused by the height value since it doesn't change. Can any give me a solution for change the height or tell me if there is a CSS solution or hack for this? What would yours do in this case?
Have you tried to change the height to 100%?
I would remove the height declaration.
I'm making a page to scale down to fairly small browser sizes, including on desktops. I've got it down for pretty much every browser but firefox; it just doesn't make the content smaller the same way as other browsers.
Say I have a simple page like this:
<body>
<div style="width:auto; max-width:500px; margin:20px;background-color:black;"> Some filler text </div>
</body>
If you try that in any browser but firefox, when you resize the window to smaller than 540px, the div gets smaller, as you would expect. But in firefox, it does no such thing. At least not in 8.0. It resizes the div a tiny amount and then lets it extend off the window, without even leaving a scrollbar.
Is there any way around this behavior?
EDIT: I've reproduced this is on older versions of firefox as well, but I found something odd. When I said it resizes the div a tiny amount, here's what happens: the body of the page stays at 367px width. Two different versions of firefox, two versions of windows, the same number.
The issue you're running into is that in Firefox depending on the exact themes or extensions in use as you resize the browser window the browser content area may not resize (because, for example, the various buttons on the widest toolbar impose a minimum width on that content area due to the way the user interface is laid out).
This is why you see the body not changing size: the CSS viewport itself is not changing size. If your page had a vertical scrollbar, you'd see that scrollbar disappear off the right edge of the window, just like parts of the browser UI itself disappear.
You can work around this with enough toolbar customization (e.g. remove everything from the toolbars) if you just need this for testing. On the other hand if you just need this for testing you can probably jut load the site in an iframe which you then size however you want...
Wanted to say something about your comment regarding "width: auto" vs "width: 100%" but I can't comment yet...
You can set "width: 100%" and make it account for padding and borders by also setting "box-sizing: border-box" - you'll need to use the vendor prefixes I believe -moz- and -webkit-. Not sure if it will solve you problem, but it's good to know - maybe try it out and see what happens.
Here is the site in question: www.prestigedesigns.com
The problem is that my header and footer won't stretch to their assigned 100% but only on iPhone/iPad.
I've tried what I think is everything and I could really use some help? Is there anyone else that has a similar issue?
Thanks.
It's kind of a viewport issue with mobile Safari, but you can get the same effect by shrinking the width of your desktop browser window and scrolling right, you'll see your background starts dropping out.
This is because when you're setting width:100% to your #top and #header divs, you're telling them to resize to the width of the containing element, which in this case is the browser window, (or viewport). You're not telling them to resize to the content within.
Mobile Safari's default viewport width is 980px, so it uses 980px as the width of the containing element for your divs. This is why your layout, which is around 1050px, is getting its background chopped off.
You can fix this for mobile Safari by directly setting its viewport (read Apple's Docs), or by adding min-width:width of your design in pixels; to your body. Mobile Safari will use the min-width's value for setting its viewport, and it'll also keep it from happening in desktop browsers as well.
Set the viewport to adapt your page on any device.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Set min-width:(Width of your design)px; in CSS file and this issue will be solved.
it's not assigned width: 100% the header is getting width: 1009px; same thing with the footer.
Just a hunch as I can't actually test it, but the foot element you have within footbar is set to an absolute width in pixels while the footbar is set to % - the same with your header element - try switching these to % too?
I have an image that, depending on the screen resolution, drops down out of sight in my CSS flow layout because I have set its width and height to static values.
Is there a way in a CSS flow layout to have the image automatically resize while someone is making the browser window smaller. I have seen this done in a html-table layout and I assume the tables make it possible there - is there a way to also do this in a CSS flow layout?
A quick test shows that this:
<img class="test" src="testimage.jpg" />
combined with:
img.test { width: 50%; }
Resizes the way you probably want. The image dutifully resized to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
As for resizing based on vertical changes, it doesn't work the way you would like, at least not consistently. I tried:
img.test { height: 50%; }
In current Google Chrome (2.0.172), it resizes somewhat inconsitently; the sizing is correct but does not update after every window drag. In current Firefox (3.5), the height seems to be ignored completely. I don't have any remotely recent IE, Safari, etc to test. Feel free to edit in those results. Even if those do well its still probably something you want to avoid, and stick with width.
EDIT:
For this to work, all the elements containing img.test need to be sized with percentages, not statically.
Think of it this way:
body is 100% of window size.
img is 50% of body.
img is 50% of window size.
Now suppose I add a div. like this...
<div class="imgbox" style="width: 100px;">
<img class="test" src="testimage.jpg" />
</div>
Then
body is 100% of window size.
div is 100px, ignoring body width.
img is 50% of div.
img is 50px, regardless of window size.
If the div has "width: 100%" though, then the logic works out the same as before. As long as its some percentage, and not fixed, you can play with the percentage on the img and make it work out the size you want.
bit of a guess since my css is rubbish, but since nobody is answering, what about setting a % width or height or both in the image so that it is a percent of its parent. dunno?
Try setting max-width to something like 95%. Thank way the image will shrink when the container width is less then the width of the image. All of the parent containers would need to adju
max-width:95%;