Responsive images with Flex?

Question

I'm super new to the world of coding, so please bear with me ;)

I want to know if I could use a flexbox around an image to make it responsive rather than the "img-responsive" class?

I would imagine this would also be the better option for resizing a box that has an image and text in it?

B.

Solution

Responsive image manipulation with flex properties

For production level code we have to add CSS Reset Code

.container {
  max-width: 1200px;
  display: flex;
  align-items: center;
  -webkit-justify-content: center;
  /* Safari */
  justify-content: center;
}

.item {
  padding: 10px;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

<div class="container">
  <div class="item">
    <img src="http://i.imgur.com/EvzEpEi.jpg" alt="image1">
  </div>
  <div class="item">
    <img src="http://i.imgur.com/EvzEpEi.jpg" alt="image2">
  </div>
  <div class="item">
    <img src="http://i.imgur.com/EvzEpEi.jpg" alt="image3">
  </div>
  <div class="item">
    <img src="http://i.imgur.com/EvzEpEi.jpg" alt="image4">
  </div>
</div>

Comments

[Rob]

What is img-responsive?