CODEWITHSUNDEEP
htmlcss
how2code
how2code

Reputation: 127

How do fit image into its container using flexbox?

.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 :)

enter image description here

Upvotes: 0

Views: 1217

Answers (3)

Mauricio Vuljevas
Mauricio Vuljevas

Reputation: 16

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!

Upvotes: 0

diego burlando
diego burlando

Reputation: 21

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;
}

Upvotes: 1

Always Helping
Always Helping

Reputation: 14570

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>

Upvotes: 1

Related Questions