CODEWITHSUNDEEP
cssimage
LAMF64
LAMF64

Reputation: 31

Dynamic image width in 3 rows with css

I need help to find a solution with a "grid" layout in css. I have 3 rown of images and I need the images to dynamically and automatically change with when the browser window gets smaller. The layout can be found here: The Layout I want

I have set it up like this and it sort of works but I am not 100% atisfied so I wonder if someone can help me do it even more responsive and dynamic.

<!--HTML code-->
    <div class="container">
                             <div class="box1"><img src="BILDER/Inkastare/slang.jpg" class="img slang" /></div>
                             <div class="box1"><img src="BILDER/Inkastare/olja.jpg" class="img olja" /></div>
                             <div class="box1"><img src="BILDER/Inkastare/slangpressar.jpg" class="img slangpressar" /></div>
                             <div style="clear: both;"></div>
                             <div class="box2"><img src="BILDER/Inkastare/filter.jpg" class="img filter" /></div>
                             <div class="box1"><img src="BILDER/Inkastare/sagmotorer.jpg" class="img sagmotorer" /></div>
                             <div style="clear: both;"></div>
                             <div class="box4"><img src="BILDER/Inkastare/givare.jpg" class="img givare" /></div>
                             <div class="box4"><img src="BILDER/Inkastare/packningar.jpg" class="img packningar" /></div>
                             <div class="box4"><img src="BILDER/Inkastare/matarhjul.jpg" class="img matarhjul" /></div>
                             <div class="box4"><img src="BILDER/Inkastare/cylindrar.jpg" class="img cylindrar" /></div>
</div>

/* CSS-Code */

.container {
    width: 99%;
}

.img.slang, .img.olja, .img.slangpressar, .img.filter, .img.sagmotorer, .img.givare, .img.packningar, .img.matarhjul, .img.cylindrar {
    margin-right: 19px;
    margin-bottom: 19px;
    float: left;
    width: 100%;
}

.box1 {
    width: 97%;
    max-width: 410px;
    min-width: 200px;
    padding: 0;
    float: left;
    margin-right: 19px;
}
.box2 {
    width: 97%; 
    max-width: 838px; 
    min-width: 200px;
    padding: 0; 
    float: left;
    margin-right: 19px;
}

.box4 {
    width: 97%; 
    max-width: 303px; 
    min-width: 200px;
    padding: 0; 
    float: left;
    margin-right: 19px;
}

Upvotes: 0

Views: 127

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106008

You may also use a grid system, alike bootstrap based on a 12 columns to dispatch your boxes :

example :

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

[class^="box"] {
  background: white;
}

[class^="box"] img {
  width: 100%;
  height: 100%;
  vertical-align: top;
  ob-ject-fit: cover;
}

.box3 {
  grid-column: span 3
}

.box4 {
  grid-column: span 4
}

.box8 {
  grid-column: span 8
}


/* makeup */

.container {
  gap: 19px;
  background: #DB545A;
  width: 800px;
  max-width: 99%;
  margin: 1em auto;
  border: solid;
}
<div class="container">
  <div class="box4"><img src="https://picsum.photos/id/1/240/200" class="img slang" /></div>
  <div class="box4"><img src="https://picsum.photos/id/1011/240/200" class="img olja" /></div>
  <div class="box4"><img src="https://picsum.photos/id/1001/240/200" class="img slangpressar" /></div>

  <div class="box8"><img src="https://picsum.photos/id/1016/500/200" class="img filter" /></div>
  <div class="box4"><img src="https://picsum.photos/id/1002/240/200" class="img sagmotorer" /></div>

  <div class="box3"><img src="https://picsum.photos/id/1008/200/200" class="img givare" /></div>
  <div class="box3"><img src="https://picsum.photos/id/1020/200/200" class="img packningar" /></div>
  <div class="box3"><img src="https://picsum.photos/id/106/200/200" class="img matarhjul" /></div>
  <div class="box3"><img src="https://picsum.photos/id/108/200/200" class="img cylindrar" /></div>
</div>

useful ressource :

Upvotes: 1

check..
check..

Reputation: 36

I would recommend to use css flex-box as it is responsive and flexible. You could do something like this:

.container{
    display: flex;
    flex-wrap: wrap;
}

I recommend you to read through the guide I linked above.

Upvotes: 0

Related Questions