[Solved] Making Images all the same size

by


I have substituted my own images for display purposes, but it’s the css here that matters (you can link it in as a separate css stylesheet – recommended – or put the style in <style> tags in the head of the html document)

In my css I have set a max-height for the images, but if your images are of varying heights, it’s probably better that you set the height to auto. (my images are about 120 anyway, some slightly over ~125)

#wrapper {
  overflow-y: visible;
  overflow-x: hidden;
  width: 100%;
  height: auto;
}

.row div {
  display: inline-block;
  position: relative;
  max-width: 30%;
  padding: 5px;
  margin: 5px;
}

a img {
  width: 95%;
  max-height: 120px;
}
<div id="wrapper">

  <div class="row">
    <div class="col-md-4 portfolio-item">
      <a href="#">
        <!--  <img class="portrait" id="bf1" src="~/Content/Images/battlefield1.png" alt="battlefield" onmouseover="ChangeImageMouseOver();" onmouseout="ChangeImageMouseOut();">-->
        <img class="portrait" id="bf1" src="http://www.rachelgallen.com/images/autumntrees.jpg" alt="Trees" />
      </a>
      <h3>
        Gaming
      </h3>
      <p>Upon yielding, kind sea subdue very seed sixth them lesser one lesser there earth days were multiply so sixth gathering fifth that man fowl made.</p>
    </div>

    <div class="col-md-4 portfolio-item">
      <!--  <a href="#">
            <img class="portrait" src="~/Content/Images/assetto corsa.jpg" alt="CORSA">    </a>-->
      <a> <img class="portrait" id="bf1" src="http://www.rachelgallen.com/images/babytiger.jpg" alt="tiger" /></a>
      <h3>
        Gaming
      </h3>
      <p>Upon yielding, kind sea subdue very seed sixth them lesser one lesser there earth days were multiply so sixth gathering fifth that man fowl made.</p>
    </div>

    <div class="col-md-4 portfolio-item">
      <!--    <a href="@Url.Action('CSGO','PC')">
            <img class="portrait" src="~/Content/Images/csgo.jpeg" alt="CSGO" >
        </a>--->
      <a> <img class="portrait" id="bf1" src="http://www.rachelgallen.com/images/daffodils1.jpg" alt="Daffodils" /></a>
      <h3>
        Gaming
      </h3>
      <p>Upon yielding, kind sea subdue very seed sixth them lesser one lesser there earth days were multiply so sixth gathering fifth that man fowl made.</p>
    </div>
  </div>

I put an id on your containing div – ids help to differentiate especially when you have a hierarchy of divs

Best of luck

1

solved Making Images all the same size