Image with overflow inside bootstrap modal
<p>I have this so far: <a href="http://codepen.io/anon/pen/jWGXKJ" rel="nofollow">codepen</a></p>

<p>html:</p>

<pre><code>&lt;a data-toggle="modal" href="#tallModal" class="btn btn-primary"&gt;Wide, Tall Content&lt;/a&gt;


&lt;div id="tallModal" class="modal modal-wide fade"&gt;   &lt;div class="modal-dialog"&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
        &lt;h4 class="modal-title"&gt;Modal title&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;
        &lt;img src="http://i.imgur.com/ikqKRG4.jpg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- /.modal-content --&gt;   &lt;/div&gt;   &lt;!-- /.modal-dialog --&gt; &lt;/div&gt; &lt;!-- /.modal --&gt;
</code></pre>

<p>css:</p>

<pre><code>.modal-dialog {
  height: 100%;
  width: 200px;
  max-width: 100%;
  margin: 0px auto;
  overflow-y: auto;
}

@media (min-width: 768px) .modal-dialog {
  margin: 0px auto;
}

.modal-body {
  padding: 0;
}
</code></pre>

<p>I want the modal to overflow both horizontally and vertically. However, I have some issues with the scrollbar covering up the image - thus I need to set the width to be the width of the image + the width of the scrollbar. How do I avoid this?</p>

<p>I don't want the image to be scaled so it must be in a div with overflow and I also want the width of the modal to be the width of the image itself without having to specify the width of the image. </p>