width and max-width attributes of image - css

Question

Could anyone tell me the relationship between width and max-width (such as which override which in terms of pixel, percentage, etc)?
How can I use them if I want to:
Auto scale an image when I resize the window and stop scaling when the image reach its original size?
Keep a fixed size until I resize window to certain small size and then start to auto resize

Answer 1

Width is the actual width of the element whereas max-width is the highest the width attribute can be. Max-width is just the limit for the width attribute.
If you want to have an image resize based on the size of the window, you can simply use a percentage for the width of the image. So 100% width would make the image as wide as the container it is within. You can then set the max-width to the width of the file so that it will never distort or stretch.
If you want to keep a fixed size until you resize the window to a certain size, you can use a media query to set the width of the element at a certain size.

Answer 2

From the spec:
10.4 Minimum and maximum widths: 'min-width' and 'max-width'
These two properties allow authors to constrain content widths to a
certain range.
The following algorithm describes how the two properties influence the
used value of the 'width' property:
The tentative used width is calculated (without 'min-width' and 'max-width') following the rules under "Calculating widths
and margins" above.
If the tentative used width is greater than 'max-width', the rules above are applied again, but this time using the computed
value of 'max-width' as the computed value for 'width'.
If the resulting width is smaller than 'min-width', the rules above are applied again, but this time using the value of
'min-width' as the computed value for 'width'.
However, for replaced elements with an intrinsic ratio and both
'width' and 'height' specified as 'auto', the algorithm is
as follows:
Select from the table the resolved height and width values for the
appropriate constraint violation. Take the max-width and max-height as
max(min, max) so that min ≤ max holds true. In this table w and h
stand for the results of the width and height computations ignoring
the 'min-width', 'min-height', 'max-width' and
'max-height' properties. Normally these are the intrinsic width
and height, but they may not be in the case of replaced elements with
intrinsic ratios.
Constraint Violation | Resolved Width | Resolved Height
------------------------------------------------------------------------------------------------------------
none | w | h
w > max-width | max-width | max(max-width * h/w, min-height)
w < min-width | min-width | min(min-width * h/w, max-height)
h > max-height | max(max-height * w/h, min-width) | max-height
h < min-height | min(min-height * w/h, max-width) | min-height
(w > max-width) and (h > max-height), | max-width | max(min-height, max-width * h/w)
where (max-width/w ≤ max-height/h) | |
(w > max-width) and (h > max-height), | max(min-width, max-height * w/h) | max-height
where (max-width/w > max-height/h) | |
(w < min-width) and (h < min-height), | min(max-width, min-height * w/h) | min-height
where (min-width/w ≤ min-height/h) | |
(w < min-width) and (h < min-height), | min-width | min(max-height, min-width * h/w)
where (min-width/w > min-height/h) | |
(w < min-width) and (h > max-height) | min-width | max-height
(w > max-width) and (h < min-height) | max-width | min-height

Answer 3

This is the definition from mozilla:
The max-width CSS property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width.
With max-width you set the max size to width.
When you resize a image, the width will that was set with "width" or "max-width".
See this example below:
/* image width will be always 500px */
img{
max-width:500px;
}
/* image width will be 100% of parent*/
img{
width:100%;
height:200px;
float:left;
display:block;
background: #00f;
}
here is my jsfiddle: http://jsfiddle.net/jmxw7j4p/
You can use media queries either: How to write a media query in CSS?

Answer 4

Auto scale an image when I resize the window and stop scaling when the
image reach its original size?
var w = 100;
$('#bigger').click(function() {
w+=25;
if (w>100)
w= 100;
$('div').css('width', w+'%');
});
$('#smaller').click(function() {
w-=25;
if(w<0)
w=0;
$('div').css('width', w+'%');
});
div {
width: 100%;
border: 1px red solid;
transition: 2s;
}
img {
width: 100%;
height: 200px;
max-width: 300px;
border: 1px green solid;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="smaller">reduce container width</button>
<button id="bigger">enlarge container width</button>
<div>
<img alt="This is an image!" />
</div>
Keep a fixed size until I resize window to certain small size and then
start to auto resize
img {
width: 300px;
}
#media (max-width:768px) {
img {
width: 100%;
}
}
<img alt="That's another image!" />