How could I, in a responsive design, have 3 images next to each other (it could be inside a div each) and when changing the width of the screen, the image changes its size automatically **but it didn't download me one below the other when the width is less than 3 med ** that is, they are next to each other
.ob {display: inline;}
<div>
<div class="ob"><img alt="" src="http://lorempixel.com/100/100/" /></div>
<div class="ob"><img alt="" src="http://lorempixel.com/100/100/" /></div>
<div class="ob"><img alt="" src="http://lorempixel.com/100/100/" /></div>
</div>
You must add the following in the CSS section :
This makes the
div
and the imagesimg
occupy the entire width of their container (in the case of the itdiv
would be the screen and for theimg
the width of thediv
classob
that contains it). In addition, all the elements that have the classob
have a third of the width (1/3 = 0.333, that is, 33.3%). The attributeinline
makes that there is no horizontal space between one paragraph and another.If you're using bootstrap (I'm saying this because of the question tag), you can use bootstrap's grids to keep all 3 images the same height.
Now in the image you can use the class
img-responsive
to make it 100% width and auto height based on the parent element. If the image doesn't expand correctly, you can apply a ruler for the image to have a width of 100%Example:
In this way, the image containers will be located in line, always occupying a third of the total width each, regardless of the size of the screen. Meanwhile, the images will occupy 100% of the size of their respective containers
EDITED
display: inline-block
will create a spacing between the images, that excess will make the last image scroll downfloat: left
it will do the same effect but without the spacing, so it won't scroll the image down.From what I see you use bootstrap, here is an example. In smartphone and tablet devices (xs and sm) they occupy all the available space while in desktop (md and lg) they occupy a third part.
The images have styles so that they occupy the entire available width even if you put less.