CSS: Width and Max-Width

From my understanding of the properties:

if width > max-width use max-width
if max-width > width use width

Therefore, using your example, this must mean that 1140px is strictly less than 98% at the screen resolution you are viewing at.

Shrink your browser screen and you will get different results.

It’s somewhat unrelated, but I’ve found max-width (and the corresponding property max-height) to be a problem with images in Internet Explorer, and found this to be helpful in coaxing it to use the correct values:

img {
    max-width: 150px;
    max-height: 120px;
    width: auto !important;
    height: auto !important;
}

Without the last two properties, most standard-compliant browsers correctly maintain aspect ratio, but Internet Explorer will not unless you do that.

Edit: It looks like I’ve said basically the same answer as everyone else.

Related Contents:

  1. What does the “>” (greater-than sign) CSS selector mean?
  2. What is the difference between visibility:hidden and display:none?
  3. What does the “+” (plus sign) CSS selector mean?
  4. Targeting only Firefox with CSS
  5. Why em instead of px?
  6. CSS to select/style first word
  7. CSS Floating Divs At Variable Heights [duplicate]
  8. How to vertically center inside the parent element with CSS? [duplicate]
  9. HTML colspan in CSS
  10. CSS3’s attr() doesn’t work in major browsers
  11. Remove padding from columns in Bootstrap 3
  12. Use of XSL-FO, CSS3 instead of CSS2 to create Paginated documents like PDF?
  13. Justify the last line of a div?
  14. Difference between @import and link in CSS
  15. How to reverse an animation on mouse out after hover
  16. Size of HTML5 Canvas via CSS versus element attributes
  17. How to create color shades using CSS variables similar to darken() of Sass?
  18. Why should we include ttf, eot, woff, svg,… in a font-face
  19. How to change an input button image using CSS
  20. CSS hexadecimal RGBA?
  21. Smallest data URI image possible for a transparent image
  22. How to rotate the background image in the container?
  23. SASS: randomly pick background-image from a list
  24. CSS transition shorthand with multiple properties?
  25. Fixed sidebar navigation in fluid twitter bootstrap 2.0
  26. How to make round corners to both inside of a box and its border?
  27. Should border-radius clip the content?
  28. How to style icon color, size, and shadow of FontAwesome Icons
  29. How can I remove the outline around hyperlinks images?
  30. Removing the image border in Chrome/IE9
  31. font-size vs line-height vs actual height
  32. absolute vs relative position width & height
  33. How to override global CSS in a CSS module file?
  34. Without media queries how to achieve 3 column desktop to 1 column mobile layout
  35. What is class=”mb-0″ in Bootstrap 4?
  36. Why use an HTML5 semantic tag instead of div? [duplicate]
  37. Bootstrap dropdowns menus appearing behind other elements – IE7
  38. What does the dot mean in CSS?
  39. Is it possible to select the last n items with nth-child?
  40. CSS transition with visibility not working
  41. Is there a “subgrid” feature, to position “grandchildren” of a grid container?
  42. CSS: bolding some text without changing its container’s size
  43. Superscript in CSS only?
  44. Prevent flex items from overflowing a container
  45. Anyway to prevent the Blue highlighting of elements in Chrome when clicking quickly?
  46. Vue.js dynamic with variables
  47. Vertical align table-cell don’t work with position absolute
  48. object-fit, object-positioning and absolute positioning
  49. CSS word-wrapping in div
  50. Pure CSS animation visibility with delay

Leave a Comment