CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Marcin Doliwa
Marcin Doliwa

Reputation: 3659

Image in modal window - how to set modal width to auto?

I have modal window with image, all works fine, but for some images I get blank space on the right side of image.

Example: http://www.bootply.com/yjIFNRdcF1

<a data-toggle="modal" data-target="#full-flyer-120" href="#">CLICK ME</a>

  <div class="modal fade" id="full-flyer-120" tabindex="-1" role="dialog" aria-labelledby="full-flyer-120Label" style="display: none;">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <img class="img-responsive" src="http://portalwiedzy.onet.pl/_i/mendelejew.jpg" alt="Full mendelejew">
        </div>
      </div>
    </div>
  </div>

How can I change it so modal window is the same size as image?

Upvotes: 0

Views: 3294

Answers (1)

Jannik
Jannik

Reputation: 342

Just add the following to your stylesheet.

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    width: 100%;
    height: auto;
}
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<a data-toggle="modal" data-target="#full-flyer-120" href="#">CLICK ME</a>

      <div class="modal fade" id="full-flyer-120" tabindex="-1" role="dialog" aria-labelledby="full-flyer-120Label" style="display: none;">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-body">
              <img class="img-responsive" src="http://portalwiedzy.onet.pl/_i/mendelejew.jpg" alt="Full mendelejew">
            </div>
          </div>
        </div>
      </div>

Basically, you need to change the image style a little.

Hope this helps

Upvotes: 2

Related Questions