CODEWITHSUNDEEP
htmlcss
user3052443
user3052443

Reputation: 842

Resizing images in row on browser size

I have three images inline. They are 330px wide with 10px separating them. When displayed on a mobile phone, or any window under 1,010px, the images appear one below the other. I would like them to reduce in size so they stay inline. I have tried to simulate the problem in my jsfiddle by placing a div of 100px around the code. That is not there in the actual code. As you can see, the images are not on one line. There are many examples here of how to do this but none address multiple images, that I can find. Is there a way to do this? jsfiddle

    <style>
    .imagewrapper img {
      max-width: 90%;
      height: auto;
    }
    .box_row_f { display:inline-block; border:4px solid #5CB65C } 
    .box_row_n { display:inline-block; border:4px solid #5CB65C; margin-left:10px } 
    </style>

    <div style="width:100px">
      <div class="imagewrapper">
        <div class="box_row_f"><img src="someimage.jpg"></div>
        <div class="box_row_f"><img src="someimage.jpg"></div>
        <div class="box_row_f"><img src="someimage.jpg"></div>
      </div>
    </div>

Upvotes: 0

Views: 35

Answers (2)

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

If you working with lot's of images then it's better you make a responsive image class for all the images.And dosen't matter if the original image size is bigger. And also see that in you css box_row_n but I don't find this class on your html section. I don't know why you use 100px for the 1st div. anyways you can use that if you want. Fiddle

 body{
 margin:0;
}
.imagewrapper {
 display: inline-flex;
}

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

.box_row_f {
  border: 4px solid #5CB65C;
  margin-left: 10px;
}
  <div class="imagewrapper">
<div class="box_row_f"><img class="img-responsive" src="//dummyimage.com/700x350"></div>
<div class="box_row_f"><img class="img-responsive" src="//dummyimage.com/700x350"></div>
<div class="box_row_f"><img class="img-responsive" src="//dummyimage.com/700x350"></div>
  </div>

Upvotes: 0

Stickers
Stickers

Reputation: 78686

I would suggest to use flexbox for it.

.imagewrapper {
  display: flex;
}
.imagewrapper img {
  max-width: 100%;
  height: auto;
}
.box_row_f ~ .box_row_f {
  margin-left: 10px;
}
<div class="imagewrapper">
  <div class="box_row_f"><img src="//dummyimage.com/500"></div>
  <div class="box_row_f"><img src="//dummyimage.com/500"></div>
  <div class="box_row_f"><img src="//dummyimage.com/500"></div>
</div>

Upvotes: 1

Related Questions