How do fit image into its container using flexbox?

Question

.navbar{
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%;   
}
.navbar a:hover {
  background: #ddd;
  color: black;
}
.navbar a {
  float:right;
  color: #f2f2f2;
  display:block;
  text-decoration:none;
  padding: 30px 30px;
}

body{
  background-color: #ddd;
}

#intro{
  padding-top:50px;
text-align:center;
}

#email-container{
  display:flex;
  flex-direction:column;
  align-items:center;
}

#video{
  text-align:center;
}

#email-input{
  width:348px;
}

#email-submit{
  background-color:#4CAF50;
  text-decoration:none;
  padding: 10px 20px;
  display:inline-block;
  color:white;
  margin:10px 14px;
  border-radius:4px;
}

#features2{
  display:flex;
  flex-direction:column;
  flex-basis:1em;
}
#clothes{
  height:200px;
  width:auto;
}
#credit-card{
  height:200px;
  width:auto;
}
#delivery-truck{
  height:300px;
  width:auto;
}



<!DOCTYPE html>
<html>
  <div class="navbar" id="navigationbar">
    <a href="#Features">Features</a>
    <a href="#intro">Introduction</a>
    <a href="#prices">Prices</a> <br><br><br>
  </div>
  <div id="content">
  <div id="intro">
    <h1 id="header">Company name</h1>
    <img id="header-image" src="https://image.shutterstock.com/image-vector/circle-business-logo-company-name-260nw-626261534.jpg" alt="company-logo"><br><br>
  </div>
    
    
    <div id="email-container">
      <form>
        <div id="email">
        <input id="email-input" type="email" placeholder="Enter your E-mail here..."></div>
        <button id="email-submit"><b>SUBMIT E-MAIL TO RECEIVE LATEST NEWS</b></button>
      </form>
    </div>
  
  <div id="features">
    <h1>Lorem ipsum</h1>
    <div id="features1">
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    <p>Lorem ipsum</p>
    </div>
    <div id="features2">
      <img id="delivery-truck" src="https://wholesale-steroids.cc/wp-content/uploads/2019/02/delivery-truck-400x400.png" alt="delivery-truck">
      <img id="clothes" src="https://image.flaticon.com/icons/png/512/106/106020.png" alt="clothes">
      <img id="credit-card" src="https://loanssos.com/wp-content/uploads/2014/07/credit-card.png" alt="credit-card">
    </div>
  </div>
  
  <div id="prices">
  </div>
  </div>
</html>

I want to put the images in a column, like vertically but it ended up being stretched and idk how to fix it. I used flex so I can arrange them and place them besides the Lorem ipsum words later on. Is there a better way that's easy? I'm kind of new to HTML and css. Sorry there's a lot of unnecessary code as I just copy pasted the whole thing, but you only need to look at the img-src and the css counterparts think. EDIT:Thanks it has been solved :)

score 1 · Accepted Answer · answered Aug 08 '20 at 02:21

You need to use object-fit: with contain CSS property to get original size of the image and fit it nicely.

The object-fit CSS property sets how the content of a replaced element, such as an img or video, should be resized to fit its container.

Live Demo

.navbar {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  width: 100%;
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.navbar a {
  float: right;
  color: #f2f2f2;
  display: block;
  text-decoration: none;
  padding: 30px 30px;
}

body {
  background-color: #ddd;
}

#intro {
  padding-top: 50px;
  text-align: center;
}

#email-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#video {
  text-align: center;
}

#email-input {
  width: 348px;
}

#email-submit {
  background-color: #4CAF50;
  text-decoration: none;
  padding: 10px 20px;
  display: inline-block;
  color: white;
  margin: 10px 14px;
  border-radius: 4px;
}

#features2 {
  display: flex;
  flex-direction: column;
  flex-basis: 1em;
}

#clothes {
  height: 200px;
  width: auto;
  object-fit: contain;
}

#credit-card {
  height: 200px;
  width: auto;
  object-fit: contain;
}

#delivery-truck {
  height: 300px;
  width: auto;
  object-fit: contain;
}

<!DOCTYPE html>
<html>
<div class="navbar" id="navigationbar">
  <a href="#Features">Features</a>
  <a href="#intro">Introduction</a>
  <a href="#prices">Prices</a> <br><br><br>
</div>
<div id="content">
  <div id="intro">
    <h1 id="header">Company name</h1>
    <img id="header-image" src="https://image.shutterstock.com/image-vector/circle-business-logo-company-name-260nw-626261534.jpg" alt="company-logo"><br><br>
  </div>


  <div id="email-container">
    <form>
      <div id="email">
        <input id="email-input" type="email" placeholder="Enter your E-mail here..."></div>
      <button id="email-submit"><b>SUBMIT E-MAIL TO RECEIVE LATEST NEWS</b></button>
    </form>
  </div>

  <div id="features">
    <h1>Lorem ipsum</h1>
    <div id="features1">
      <p>Lorem ipsum</p>
      <p>Lorem ipsum</p>
      <p>Lorem ipsum</p>
    </div>
    <div id="features2">
      <img id="delivery-truck" src="https://wholesale-steroids.cc/wp-content/uploads/2019/02/delivery-truck-400x400.png" alt="delivery-truck">
      <img id="clothes" src="https://image.flaticon.com/icons/png/512/106/106020.png" alt="clothes">
      <img id="credit-card" src="https://loanssos.com/wp-content/uploads/2014/07/credit-card.png" alt="credit-card">
    </div>
  </div>

  <div id="prices">
  </div>
</div>

</html>

score 1 · Answer 2 · answered Aug 08 '20 at 02:26

remove the flex from your container and I have placed in ccs that your images have a display: block and an auto margin.

.navbar{
  overflow: hidden;
  background-color: #333;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%;   
}
.navbar a:hover {
  background: #ddd;
  color: black;
}
.navbar a {
  float:right;
  color: #f2f2f2;
  display:block;
  text-decoration:none;
  padding: 30px 30px;
}

body{
  background-color: #ddd;
}

#intro{
  padding-top:50px;
text-align:center;
}

#email-container{
  display:flex;
  flex-direction:column;
  align-items:center;
}

#video{
  text-align:center;
}

#email-input{
  width:348px;
}

#email-submit{
  background-color:#4CAF50;
  text-decoration:none;
  padding: 10px 20px;
  display:inline-block;
  color:white;
  margin:10px 14px;
  border-radius:4px;
}

#features2 img{
  display: block;
  margin: auto;
}
#clothes{
  height:200px;
  width:auto;
}
#credit-card{
  height:200px;
  width:auto;
}
#delivery-truck{
  height:300px;
  width:auto;
}

score 0 · Answer 3 · edited Aug 08 '20 at 20:34

Try with adding CSS #features img { object-fit: contain; } to use just one rule for all your images inside your flex box div.

Adding the object-fit: contain; CSS attribute to your images and it will preserve your images aspect ratio.

For this property you can use whatever fits the most for what you're looking for, more options are available for object-fit, like cover, fill or scale-down.

You can test them and see if fits your needs!

How do fit image into its container using flexbox?

3 Answers3

Linked