title: Best way to make a image grid? All same size and dimensions
body: <p>im trying to make a photo grid for the reference web page, what would be the best method? so far I have managed to get the photos sort-of alined, but i have a problem as they are different sizes. how to reshape them all equal? would i need to use photoshop? any tips, papa bless.</p>
  
  <p><a href="https://jsfiddle.net/12bv63h8/" rel="nofollow noreferrer">https://jsfiddle.net/12bv63h8/</a>
  example <a href="https://imgur.com/a/0z1TA" rel="nofollow noreferrer">http://imgur.com/a/0z1TA</a></p>
  
  <blockquote>
    <p>HTML</p>
  </blockquote>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
     &lt;title&gt; Referenzen &lt;/title&gt;
     &lt;link rel="stylesheet" href="index.css" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;div class="container"&gt;           
     &lt;h1 align="center"&gt;
     &lt;a href="index.html"&gt;&lt;img src="logo.png" alt="A.Willi A.G" /&gt;&lt;/a&gt;
  &lt;/h1&gt;       
     &lt;div class="menu_div"&gt;
     &lt;ul&gt;
     &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;a href="kontakt.html"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
     &lt;li class="dropdown"&gt;
     &lt;a href="#" class="dropbtn"&gt;Bewerber&lt;/a&gt;
     &lt;div class="dropdown-content"&gt;
     &lt;a href="info.html"&gt;Info&lt;/a&gt;
     &lt;a href="jobs.html"&gt;Jobs&lt;/a&gt;
  &lt;/div&gt;  
  &lt;/li&gt;      
     &lt;li class="dropdown"&gt;&lt;a href="#" class="dropbtn"&gt;Kunde&lt;/a&gt;
     &lt;div class="dropdown-content"&gt;
     &lt;a href="personalverleih.html"&gt;Personalverleih&lt;/a&gt;
     &lt;a href="toolrental.html"&gt;Werkzeuge Mieten&lt;/a&gt;
     &lt;a href="referenzen.html"&gt;Referenzen&lt;/a&gt;
     &lt;a href="quali.html"&gt;Qulität, Sicherheit und Weiterbildung&lt;/a&gt;
  &lt;/li&gt;
  &lt;/div&gt;
     &lt;div class="fadein"&gt; 
     &lt;img src="welder1.png"&gt;
     &lt;img src="welder1.png"&gt;
     &lt;img src="welder1.png"&gt; 
  &lt;/div&gt;     
  
     &lt;div class="floated_img"&gt;
     &lt;ul&gt;
     &lt;li&gt;&lt;img src="despraz_logo.GIF" alt="Despraz SA Logo"/&gt;&lt;/li&gt;
  &lt;/ul&gt;      
  &lt;ul&gt;
     &lt;li&gt;&lt;img src="caliqua_logo.gif" alt="Caliqua Logo"/&gt;&lt;/li&gt;
  &lt;/ul&gt;    
  &lt;ul&gt;
     &lt;li&gt;&lt;img src="bacher_logo.gif" alt="Bacher Logo"/&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
     &lt;li&gt;&lt;img src="bwt_logo.jpg" alt="BWT Logo"/&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
     &lt;li&gt;&lt;img src="engie-logo.jpg" alt="Engine Logo"/&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
     &lt;li&gt;&lt;img src="halg_logo.jpg" alt="Halg Logo"/&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
     &lt;li&gt;&lt;img src="johnson_controls_logo.jpg" alt="Johson Controls Logo"/&gt;&lt;/li&gt;
  &lt;/ul&gt;    
  &lt;/div&gt;       
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <blockquote>
    <p>CSS</p>
  </blockquote>
  
  <pre><code>body { font-family: verdana; background:white ; color: black; }
  
  
  }
  
  .menu_div{background-color: #333; width:100%;}
  ul {
      list-style-type: none;
      margin: 0 auto;
      display:table;
      padding: 0;
      z-index: 100;
      overflow: hidden;
  }
  
  li {
      float: left;
  }
  
  li a, .dropbtn {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  
  li a:hover, .dropdown:hover .dropbtn {
      background-color: black;
  }
  
  li.dropdown {
      display: inline-block;
  }
  
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 100;
  }
  
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left;
  }
  
  .dropdown-content a:hover {background-color: #f1f1f1}
  
  .dropdown:hover .dropdown-content {
      display: block;
  }
  
          @keyframes fade {
          0%   { opacity: 0; }
          11.11%   { opacity: 1; }
          33.33%  { opacity: 1; }
          44.44%  { opacity: 0; }
          100% { opacity: 0; }
  }
  
      .fadein { position:absolute; height:500px; width:49px; outline: 1px solid blue; }
      .fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
      .fadein img:nth-child(1) { animation-delay: 0s;  }
      .fadein img:nth-child(2) { animation-delay: 3s;  }
      .fadein img:nth-child(3) { animation-delay: 6s;  }
  
  .menu_div { 
    position: relative;
    z-index: 0;
    height: 2.9em;
    margin-bottom: -0.4em;
    margin-top: 0em;
    z-index:1000;
    background-color: #333
  
  
  }
  .fadein { 
    position: relative;
    z-index: 3; 
    background: ;
    width: 100%;
    left: -0.5px;
    top: 0em;
  
  
    }
  
  .fadein img{
      margin:0 auto;
      width: 100%;
      max-width: 4060px;
      min-width: 900px;
      max-height: 400%;
  }
  
  
  
  
  .tech-slideshow {
    height: 200px;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
  }
  
  .tech-slideshow &gt; div {
    height: 100px;
    width: 100px;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/collage.jpg);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transform: translate3d(0, 0, 0);
  }
  .tech-slideshow .mover-1 {
    animation: moveSlideshow 12s linear infinite;
  }
  .tech-slideshow .mover-2 {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    background-position: 0 -200px;
    animation: moveSlideshow 15s linear infinite;
  }
  .tech-slideshow:hover .mover-2 {
    opacity: 1;
  }
  
  @keyframes moveSlideshow {
    100% { 
      transform: translateX(-66.6666%);  
    }
  }
  
  
  form {
    background-color: #f7f7f7;
    border: 2px solid #CCCCCC;
  
    /* Just to center the form on the page */
    margin:  auto;
    width: auto;
    height: auto;
  
    /* To see the limits of the form */
    padding: 10em;
  }
  
  div + div {
    margin-top: 0.3em;
  }
  
  label {
    /* To make sure that all label have the same size and are properly align */
    display: inline-block;
    width: 170px;
    text-align: left;
  }
  
  input, textarea {
    /* To make sure that all text field have the same font settings
       By default, textarea are set with a monospace font */
    font: 1em verdana;
  
    /* To give the same size to all text field */
    width: 200px;
  
    -moz-box-sizing: border-box;
         box-sizing: border-box;
  
    /* To harmonize the look &amp; feel of text field border */
    border: 2px solid ;
  }
  
  input:focus, textarea:focus {
    /* To give a little highligh on active elements */
    border-color: black;
  }
  
  textarea {
    /* To properly align multiline text field with their label */
    vertical-align: top
  
    /* To give enough room to type some text */
    height: 23em;
  
    /* To allow users to resize any textarea vertically
       It works only on Chrome, Firefox and Safari */
    resize: vertical;
  }
  
  .button {
    /* To position the buttons to the same position of the text fields */
    padding-left: 400px; /* same size as the label elements */
  }
  
  button {
    /* This extra magin represent the same space as the space between
       the labels and their text fields */
    margin-left: 2em;
  }
  
  .container {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .image-upload &gt; input
  {
      display: none;
  }
  
  .image-upload img
  {
      width: 70px;
      cursor: pointer;
  
  }
  
  
  
  .flex-container {
      display: -webkit-flex;
      display: flex;  
      -webkit-flex-flow: row wrap;
      flex-flow: row wrap;
      text-align: center;
      border: -0.2px solid #CCCCCC;
  }
  
  .flex-container &gt; * {
      padding: 150px;
      -webkit-flex: 1 110%;
      flex: 1 100%;
      height: 70px;
      border: 3px solid #CCCCCC;
      height: 200px:
  }
  
  .article {
      text-align: left;
      height: 200px;
      margin-bottom:11px
  }
  
  header {
  background: white;color:black;
  font-size: 0.9em;
  }
  
  
  footer {background: #333;color:white;
  position: absolute;
  bottom: -641px;
  width: 1117px;
  
  }
  
  @media all and (min-width: 768px) {
      .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
      .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
      footer {-webkit-order:3;order:3;}
  }
  
  
  
  .indexinfo {
  
  padding:70px;
  -webkit-flex: 1 100%;
  flex: 1 110%;
  height: 70px;
  border: px solid black;
  height: 200px:
  text: center;
  
  }
  
  .sidebar-image-gallery { 
  
  height: 700px;
  width: 1323px;
  
  }
  
  
      display: block;
      font-size: 2em;
      margin-top: 0.67em;
      margin-bottom: 0.67em;
      margin-left: 0;
      margin-right: 0;
      font-weight: bold;
  }
  
  .floated_img
  {
      float: center;
      padding: .5rem;
  }
  </code></pre>