CODEWITHSUNDEEP
htmlcssimageresponsive-designinline
Zac
Zac

Reputation: 21

Responsive Image Container

I'm trying to get a set of 8 images (all with same dimensions), to display in-line with equal spacing and respond to browser width.

Starting with 4 images over 2 rows then as the browser width decreases, for them to shrink to a certain point that they are still clearly legible, then move to 2 images over 4 rows. I've noticed that it does this without any styling but it also has a stage in between where it pushes one image down onto a new row, so 3-1-3-1. I want to avoid this.

Here's what I'm currently working with.

.features {
  width: 100%;
  display: block;
  text-align: center;
}

.features img {
  width: 220px;
  margin: 10px;
}
<div class="features">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-lighweight-black.png?9028853389915552257">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-pocket-black.png?9028853389915552257">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-solar-black.png?9028853389915552257">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-battery-black.png?9028853389915552257">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-apple-black.png?9028853389915552257">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-compatible-black.png?9028853389915552257">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-connector-black.png?9028853389915552257">
  <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-led-black.png?9028853389915552257">
</div>

Hope that makes sense. I'd like to do this just using CSS and HTML assuming that's possible.

Upvotes: 0

Views: 833

Answers (3)

Ehsan
Ehsan

Reputation: 12959

Try This :

.col {
  width: 25%;
  float: left;
  text-align: center;
  box-sizing: border-box;
}

@media screen and (max-width: 1285px) {
  .col {
    width: 50%;
    float: left;
  }
}

@media screen and (max-width: 670px) {
  .col {
    width: auto;
    float: none;
  }
  img {
    min-width: 220px;
  }
}
@media screen and (max-width: 365px) {
  img {
    
     width:100%;
  }
}
<div class="features">

  <div class="col">
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-lighweight-black.png?9028853389915552257">
  </div>

  <div class="col">
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-pocket-black.png?9028853389915552257">
  </div>

  <div class="col">
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-solar-black.png?9028853389915552257">
  </div>

  <div class="col">
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-battery-black.png?9028853389915552257">
  </div>

  <div class="col">
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-apple-black.png?9028853389915552257">
  </div>

  <div class="col">
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-compatible-black.png?9028853389915552257">
  </div>

  <div class="col">
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-connector-black.png?9028853389915552257">
  </div>

  <div class="col">
    <img src="https://cdn.shopify.com/s/files/1/1899/1203/files/jupa-icon-led-
		black.png?9028853389915552257">
  </div>

</div>

Upvotes: 0

marcus hall
marcus hall

Reputation: 566

A grid system using media queries to set the breakpoints for where you want the columns to change width is what you want. https://codepen.io/anon/pen/EmXrMm

CSS tricks has a good article on rolling your own grids here https://css-tricks.com/dont-overthink-it-grids/.

Or you could do the same using flexbox depending on the support constraints.

Note: border box stops the padding declaration adding additional width to the columns. cf is a clearfix, makes the container grow in size relative to the floated elements inside. Rest is pretty straight forward.

* {
  box-sizing: border-box;
}

.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.cf {
  *zoom: 1;
}

.features__col {
  width: 100%;
  float: left;
  padding: 15px;
}

.features__col img {
  width: 100%;
}

@media (min-width: 400px) {
  .features__col {
    width: 50%;
  }
}

@media (min-width: 800px) {
  .features__col {
    width: 25%;
  }
}
<div class="features cf">
  <div class="features__col">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
  </div>
  <div class="features__col">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
  </div>
  <div class="features__col">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
  </div>
  <div class="features__col">
    <img src="https://placeholdit.imgix.net/~text?txtsize=47&txt=500%C3%97500&w=500&h=500" alt="" />
  </div>
</div>
</div>

Upvotes: 2

Phil Lucks
Phil Lucks

Reputation: 3933

if you want the images to shrink you'll need to set some breakpoints with media queries and try using flexbox

.features{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;

}
.features img {
  padding: 10px;
  width: 310px;
  height: 381px;
}

@media all and (max-width: 600px) {
  .features img {
    width: 50%;
    height: 50%;
  }

Upvotes: 1

Related Questions