title: How to override reddits .media-preview to show full quality images uploaded there with adaptive size corresponding to browser window?
body: <p>See the image gallery: <a href="https://imgur.com/a/gpaRo" rel="nofollow noreferrer">http://imgur.com/a/gpaRo</a></p>
  
  <p>Watch the post: <a href="https://www.reddit.com/r/CallOfDutyWorldWarTwo/comments/6fyhab/the_big_edge_interview_with_shgames/" rel="nofollow noreferrer">https://www.reddit.com/r/CallOfDutyWorldWarTwo/comments/6fyhab/the_big_edge_interview_with_shgames/</a></p>
  
  <p>I have managed to set a fixed size, wich blows up the "preview (That is images uploaded to reddit, videos from youtube, imgur galleries etc. media preview)" before you click it. As you can see; the "higher" the image are the smaller it gets in width.</p>
  
  <p>The ultimate solution would have the full scale image shown with 100% width of the post, not a thumbnail.</p>
  
  <p>Here is the what i have: </p>
  
  <pre><code>.media-preview {
  max-width: none !important;
  overflow: auto;
  position: relative;
  }
  
  
  .media-preview {
  max-width: 710px !important;
  overflow: auto;
  position: relative;
  }
  
  .media-preview .media-preview-content {
  float: left;
  max-width: 710px;
  width: 450px;
  }
  </code></pre>
  
  <p>There have to be a smart way to get it to display better than what im capable of. </p>
  
  <p>Thanks for viewing and hopefully replying with an answer.</p>