I'm working on a large form and have noticed that if an image is within a fieldset it doesn't obey the max-width: 100% rule.
It works as expected in Chrome and Safari but in Firefox the image overflows the container and the image keeps its normal size.
I would prefer to not make changes to the html structure and keep the images inside the fieldsets.
Anyone have any ideas if there is a workaround or why this only happens in Firefox?
simple example
http://codepen.io/FernE97/pen/NPZKaR
For purely CSS solution, check this link http://codepen.io/saig/pen/RNXLwY
Tested with 800x400 and 400x400 image sizes
img {
width: 100%;
max-width: -moz-fit-content;
max-width: -webkit-fit-content;
height: auto;
}
You can check this link for max-width implementation by MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/max-width?redirectlocale=en-US&redirectslug=CSS%2Fmax-width#Examples
You can try this workaround, width property defined. use max-width to overrides width property
img {
width: 100%;
max-width: 100%;
height: auto;
}
Edit : Please check this url : http://codepen.io/anon/pen/PwrWQK
I've added script which dynamically changes max-width property based on image dimension, hope this helps to fix your issue in Firefox.
Related
I'm trying to adjust the images and size depending the page size to doesn't go outside the grid, but I couldn't make it.
I tried add theses lines below in CSS but it bugged the others images
img{
width: 100%;
max-width: 800px;
}
The content should adjust the size of the image, but it isn't working
The image going outside the grid:
You can see the live preview here
Just give max-width for image to 100%
img {
max-width: 100%;
}
do the exact opposite you are doing
img {
width:800px; /* this is optional */
max-width: 100%;
}
OP's comment:
I already dropped it (the width:800px), but it messed with the images at right sidebar.
Then create a class something like img-resposive and for that class apply max-width: 100%. And use that class in images you want/need to
I suggest if you are trying responsive design, use 50em; instead of 800px
They are both equal (except when window is resized.)
I have a table that has image in one of its column:
In Firefox and IE, the image always as big as the original size, making the td expands beyond it's specified width.
Here's the Codepen.
When creating the codepen, I realized that Chrome actually has the same issue, but fixed by this part of normalize.css:
img, object, embed {
max-width: 100%;
}
Some solution that I have found is adding table-layout: fixed on table. But it only fixes the issue if my table doesn't have checkbox. It behaves weirdly otherwise (you can try it on the Codepen).
Any other solution?
An easy fix for this would to target the images width as displayed below, versus targeting the width of the td tag:
CSS:
img {
border: 0;
display: inline-block;
vertical-align: middle;
width: 95%;
height: auto;
}
This is demonstrated in the following demo and should fix your problem with IE and FF browsers.
DEMO
I made a website which displays correctly on desktop but on mobile devices I get a large white margin on the right side of the screen. I tried every solution I found so far, meaning the following basically:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
overflow-y: auto;
}
Tried every combination but the most I could get out of it is that I didnt have the margin but instead a vertical scrolllbar which isnt too good either. Could please someone help me with my issue?
You can see this problem here.
You should set also max-width: 100%;, or try to find element in your html code (using development tools in your browser) which has width property value higher than mobile screen resolution.
I found that the .menu2 class element have negative margin value. Setting this to 0, and changing width of .main element to 100% instead of value in ems solved this problem in my browser.
i'm currently trying to make an image resize depending on the browser dimensions. I've managed to get the image to resize horizontally, if I make the browser window narrow the image will resize proportionally just fine. However when I resize the window vertically, Firefox just doesn't seem to want to do it! The code is pretty simple
<body>
<div id="content">
<img src="images/abc.jpg">
</div>
</body>
and the CSS:
#content {
height: 100%;
padding: 50px;
}
#content img{
max-height:100%;
max-width: 100%;
}
Another issue is that the image does seem to resize vertically in chrome, but i have to drag the bottom of the browser well over the image before it start doing this. I'd rather the image start to rezise as soon as the bottom content padding "hits" the bottom of the image so to speak. Hope this is making sense.
Any help much appreciated
try this, taken from Twitter bootstrap 2
html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Because height could potentially go on forever, you cant set the height of anything relative to the browser window to be a function of percent. What i'm saying is that you will need to put it inside of something with a fixed height to use a per-cent value. Good Luck!
-b
You've only specified the "max-height" and "max-width" properties.
If you don't specify the actual "width" or "height" properties, the image initialy takes the width and height of its physical dimensions (if not larger than the specified max-height and max-width).
Said that, the behaviour you've noticed, is correct.
The answer is, as already mentioned, to specify also a initial width or height property, dependig wether your image is portrait or landscape.
Is that what you want?
I actually just added a height to html and body, so that #contents height doesn't get to high.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
(And box-sizing: border-box to #content, because it seems like you'd want that)
I am having a page where i give max-height max-width property to image element. It is working fine in chrome and firefox but not in ie-7.
Try this css
*max-height:400px;
*max-width:400px;
like that
MAX width working in IE-7 according to Microsoft check the link below
http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx#positioning
But you have to set appropriate doctype
*+html #div {
max-height: 300px;
max-width: 300px;
}
use this code ... i think its useful for you............