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

Question

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>

I think, if I understand your question, you need to look into Media Queries which will allow you to change styles based on screen width (and other things). — zik, Sep 08 '17 at 08:34
yeah. i tried that. it was responsive tho. but it's not resizing the full width . it remains at full width of the image. not increase its width. losing quality is okay i just want to play with it. and see what i can do. — user3933865, Sep 08 '17 at 09:29

score 1 · Accepted Answer · answered Sep 08 '17 at 13:54

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>

thank you , i got it now. time to play with it. so thats how you do it. lastly is this supported by all of the browsers?? — user3933865, Sep 09 '17 at 00:28
You're welcome. That's one of possibly other ways to do it. Javascript is another route. For compatibility, you can check [https://caniuse.com/#search=calc](https://caniuse.com/#search=calc). Generally looks good except for IE10 and below. js will be more compatible. — Julio Feferman, Sep 09 '17 at 16:32

DreamRJ · Answer 2 · 2017-09-08T09:42:24.547

0

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

edited Sep 08 '17 at 09:42

answered Sep 08 '17 at 08:37

DreamRJ

55
10

i do have that. in my css code. what i want is when i hit that px. it should cover a the whole space. what happening was when it hit a
it comes down . then the normal size of the images will remain. i want the images when it hit the
the 3 images will cover the full width like to be resize 767px it's okay if i lose some quality in those images i just want to learn how to do that so i can play with it

user3933865

Sep 08 '17 at 09:28

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

2 Answers2