Bootstrap图像响应式握把

Question

The requirement is that I need to implement some form of the Bootstrap grid system . I decided to have responsive images with text description on each image on my page, so when viewing from the desktop the images are side by side and when viewed from mobile the images are stacked including the text.

Here is my HTML code

<div class="container borderColor" >
          <h1 id="example-id-name" class="centered-text sansSerif-text">STOR/E</h1>
           <p class="centered-text"> Every great story begins on a blank page </p> 


           <div class="row">
    <div class="col-sm-6 img-responsive ">
        <img src="images/book1" alt="book one">
    </div>
    <div class="col-sm-6 img-responsive ">
        <img src="images/book2" alt="book two">
    </div>
</div>

My CSS

    .img-responsive{
        display: block;
        max-width: 100%;
        height: auto;
    }

Answer 1

Use inline-block

  .img-responsive{ display: inline-block; max-width: 100%; height: auto; } 

 <div class="container borderColor" > <h1 id="example-id-name" class="centered-text sansSerif-text">STOR/E</h1> <p class="centered-text"> Every great story begins on a blank page </p> <div class="row"> <div class="col-sm-6 img-responsive "> <img src="https://i.imgur.com/kTa0GuA.png" alt="book one"> </div> <div class="col-sm-6 img-responsive "> <img src="https://i.imgur.com/kTa0GuA.png" alt="book two"> </div> </div> 

Answer 2

You can either use floats or inline-block/block. I plugged in some arbitrary numbers but it's like this:

.img-responsive{
    display: block;
    max-width: 100%;
    width: 25%;       /* or whatever you want*/
    height: auto;
    float: left;
}

@media only screen and (max-width: 600px) {   /* or whatever your mobile width is */
    .img-responsive {
        float: none;
        width: 100%;
    }
}

Answer 3

I am giving this code by expecting that you are using bootsrap If you are using bootstrap then no need of any css Just use this code instead

STOR/E Every great story begins on a blank page

  <div class="row"> <div class="col-sm-6 col-xs-12 "> <img class=" img-responsive" src="images/book1" alt="book one"> </div> <div class="col-sm-6 col-xs-12"> <img class=" img-responsive" src="images/book2" alt="book two"> </div> 

No matter how large your image is, it will display responsive

Answer 4

figured it out thanks for the guidance

<div class="container borderColor" >
              <h1 id="example-id-name" class="centered-text sansSerif-text">STOR/E</h1>
               <p class="centered-text"> Every great story begins on a blank page </p> 

            <div class="row">
                <div class="col-md-4 left "><p class="centered-text">Paper</p><img class="img-fluid img-thumbnail" src="images/book2"></div>
                <div class="col-md-4 center"><p class="centered-text">Pens</p><img class="img-fluid img-thumbnail" src="images/pens"></div>
                <div class="col-md-4 right"><p class="centered-text">Covers</p><img class="img-fluid img-thumbnail" src="images/cover1"></div>
            </div>    
        </div>