Responsive Images Inline-Block in a Div with Bootstrap

Responsive images inline-block in a div with Bootstrap

In the case of responsive images, the image(s) need an individual container that they can be sized into. In the example you have, there are three images in the one container, so they won't adapt individually to that single container. You could try something like:

.row li {  width: 33.3%;  float: left;}
img {  border: 0 none;  display: inline-block;  height: auto;  max-width: 100%;  vertical-align: middle;}

<div class="row">  <div id="small-img" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center">    <ul>      <li>        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />      </li>      <li>        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />      </li>      <li>        <img src="http://placehold.it/150x100" class="img-responsive inline-block" alt="Responsive image" />      </li>    </ul>  </div></div>

how to do a Responsive images in a list with inline-block

The images will expand if you use vw (viewport width) measurement. Set a calculation to compensate for their starting positioning as in width: calc(100vw - 70px)

Here's a snippet:

img {  width: 200px;  height: 50px;}
@media screen and (min-width: 767px) {  img {    width: calc(100vw - 70px);  }}

<div class="about-content">
  <ul>
    <li>      <a href="">        <div class="inner-content">
          <img src="img/about/1.jpg" class="img-fluid">        </div>

      </a>    </li>    <li>      <a href="">        <div class="inner-content">          <img src="img/about/2.jpg" class="img-fluid">          <div class="overlay-content">            <h4>Book a Test Drive <i class="fa fa-chevron-circle-right"></i></h4>          </div>        </div>

      </a>    </li>    <li>      <a href=""><img src="img/about/3.jpg" class="img-fluid"></a>    </li>
  </ul>  <ul>
    <li>      <a href=""><img src="img/about/4.jpg">
      </a>    </li>    <li>      <a href=""><img src="img/about/5.jpg">
      </a>    </li>    <li>      <a href=""><img src="img/about/6.jpg"></a>    </li>
  </ul>
</div>

Responsive images inline

Try just putting the 2 images inside a div with class d-flex, but each image needs to wrapped in a div as well.

The class img-fluid is giving max-width: 100% to the images so unless you wrap them in an additional div they are going wider than you want.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><div class="imgwrap d-flex">  <div>    <img src="https://picsum.photos/id/1025/400" class="img-fluid" />  </div>  <div>    <img src="https://picsum.photos/id/237/400" class="img-fluid" />  </div></div>

Responsive image resizing with inline-block property

You can use media queries and set a width of 300px (or whatever you prefer)

@media screen and  (min-width:320px) and (max-width: 480px) { 
    section.portfolio .col {
      width:300px; 

        }
}

pen is here

Also refer to https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ for various mobile dimension

How can I center 3 images inline w/ bootstrap?

I'm not really sure why you use this:

style="height: 100%; width: 100%; display: block;"  

It is redundant, since bootstrap does this out of the box with the img-responsive class. But in your code example you have written: img responsive instead of img-responsive

You said that :

I do not wish to have them span the entire webpage.

if you use container it contains all items inside a 12 column grid. if you use container-fluid it spans the entire webpage.

In my example i used col-sm-4 . Which will put 3 columns inline as long as your page is 768px and up. If you would like to have 3 columns on mobile phones and up use col-xs-4 . But always make sure you get 12 in total.

Try this:

<div class="container">
        <div class="row">
            <div class="content col-sm-4">
                <a href="./flickr" class="img-responsive"> <img alt="Flickr"  src="css/img/flickr.png" data-holder-rendered="true"> </a>
            </div>
            <div class="content col-sm-4">
                <a href="./notepad" class="img-responsive"> <img alt="Notepad"  src="css/img/notepad.png" data-holder-rendered="true"> </a>
            </div>
            <div class="content col-sm-4">
                <a href="http://aug.ie" class="img-responsive"> <img alt="Url Shortener"  src="css/img/link.png" data-holder-rendered="true"> </a>
            </div>          
        </div>
    </div>

how to use d-inline-block

Instead use inline-block use bootstrap's row/col (means use flex instead inline-block).

Wrap all in div with class container

Also and use img-fluid class to img

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container"><div class="row">    <!--Service Image-->    <div class="service_img col-6">        <img class="img-fluid" src="https://i.stack.imgur.com/mSXoO.png">    </div>
    <!--Service Content-->    <div class="col-6">    <p>         Scroll Up and Down this page to see the parallax scrolling effect.    This div is just here to enable scrolling.<br>    Tip: Try to remove the background-attachment property to remove the scrolling effect.
    </p>    </div></div></div>

---

Related Topics