title: Max-width of image without knowing image size
body: <p>I was wondering if there is a way with CSS to set the <code>max-width</code> of images in a site without know what the width of the images are?</p>
  
  <p>Right now, I currently have this set in my CSS:</p>
  
  <p><code>img {width: 100%; height: auto; display: block;}</code></p>
  
  <p>which will set all of the images to fill the full width of the browser and flex when the browser resizes.</p>
  
  <p>The only thing that I'm wondering about is if a user uploads an image into the CMS (Wordpress in this case), how can I get the the width of that image so that it's possible to set the <code>max-width</code> of the image so that it doesn't stretch all the way out and without having to set a generic value in the CSS? Is there any way with CSS, or do I have to go the javascript route?</p>
  
  <p>My reason for asking is that I'm not sure about the dimensions of some images that the user might add/update on their site.</p>
  
  <p>In the past I've always declared the <code>max-width</code> value in a specific class (example):</p>
  
  <p><code>.post img {max-width: 300px;}</code></p>
  
  <p>Which was fine since I knew the width of the images before hand. But like I mentioned before, I'm not sure what the width of some of the images will be when they upload and add them onto the site.</p>