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

Question

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

1.2k views Asked by user3933865 At 15 September 2024 at 02:25

so my problem is that i have 3 images with uneven width and still make them intact until it hit a certain width let's say 767px. and when it hit that width each of the images will take a full width of 767px until xs size of screen. sorry if this sentence construction make you crazy.

here's a piece

<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>

Original Q&A

There are 2 answers

DreamRJ On 08 September 2017 at 08:37

A way to globally give all images a responsive width is to just write this in your css file or inline style in the body tag:

<body style="img{width:100%;height:auto;}">

other way in the css file is:

img
{
width: 100%;
height: auto;
}

You can also change the % to lower as well just play around with the percent until u get it how you need it.

Ideally you should also read about @media queries

**Julio Feferman** · Accepted Answer · 2017-09-08 13:54:07

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>

TechQA.

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

There are 2 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP

Related Questions in TWITTER-BOOTSTRAP-4

Related Questions in RESPONSIVE-IMAGES

Popular Questions

Popular Tags

Trending Questions