title: Product boxes with the same width and height, despite the size of the images
body: <p>I was trying to create cards for different products, and the idea is that they should be all the same size in all directions, independent from the original size of the images, but now all the images are exceeding the limits that I thought I had placed.</p>
  
  <p>Also, I started studying HTML and CSS about two weeks ago, so, sorry if it's just a simple thing.</p>
  
  <p><a href="https://i.stack.imgur.com/Uo9Cg.png" rel="nofollow noreferrer">image of my problem</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#products-btn{
   outline: none;
   border-radius: 18px;
   background: transparent;
   border:2px solid black;
   font-size: 20px;
   width: 60%;
   height: 45px;
   cursor: pointer;
   margin: 10px;
  }
  
  #products-btn:hover{
   background-color:black;
   color: white; 
  }
  
  #products-btn:active{
   opacity: 0.7;
  }
  
  #products{
   width: 100%;
   max-width: 1280px;
   text-align: center;
  
  }
  
  #cards{
   display: inline-block;
   border:1px solid black;
   max-width: 250px;
   text-align: center;
   font-family: arial;
   box-shadow: 2px 0 3px 4px #ccc;
  }
  
  #cards:not(:last-child){
   margin-right: 20px;
  }
  
  /*#cards img{
   border:1px solid black;
  }  
  */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="products"&gt;
    
       &lt;div id="cards" class="Product1"&gt;
        &lt;img src="images/products/img1.jpg"&gt;
        &lt;h1&gt;Travel 1&lt;/h1&gt;
        &lt;p class="price"&gt;$240.00&lt;/p&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat lectus vitae risus.&lt;/p&gt;
        &lt;p&gt;&lt;button id="products-btn"&gt;Travel now!&lt;/button&gt;&lt;/p&gt;
       &lt;/div&gt;&lt;!-- product one --&gt;
  
       &lt;div id="cards" class="Product2"&gt;
        &lt;img src="images/products/img2.jpg"&gt;
        &lt;h1&gt;Travel 2&lt;/h1&gt;
        &lt;p class="price"&gt;$300.00&lt;/p&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat lectus vitae risus.&lt;/p&gt;
        &lt;p&gt;&lt;button id="products-btn"&gt;Travel now!&lt;/button&gt;&lt;/p&gt;
       &lt;/div&gt;&lt;!-- product two --&gt;
        
  
       &lt;div id="cards" class="Product3"&gt;
        &lt;img src="images/products/img3.jpg"&gt;
        &lt;h1&gt;Travel 3&lt;/h1&gt;
        &lt;p class="price"&gt;$280.00&lt;/p&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed placerat lectus vitae risus.&lt;/p&gt;
        &lt;p&gt;&lt;button id="products-btn"&gt;Travel now!&lt;/button&gt;&lt;/p&gt;
       &lt;/div&gt;&lt;!-- product three --&gt;
       
      
      &lt;/div&gt;&lt;!-- products container --&gt;</code></pre>
  </div>
  </div>
  </p>