title: CSS: Image Overflows
body: <p>I am trying to make images fit inside black border div whether they rotate or not. I have tried overflow:hidden, max-height:100% and object-fit: contain but still images overflow. with transform. I don't know what to try next. Need Help</p>
  
  <pre><code>&lt;div style="border: 1px solid"&gt;
    &lt;img img-fix-orientation="model.post.image" ng-src="{{model.post.image ? model.post.image : model.post.sub_category.name == 'Service' ? 'images/service.png' : 'images/thing.png'}}" style="max-width:100%;" alt="post image" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/pHXH4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pHXH4.png" alt="Check element style and image"></a></p>