равный размер изображения, несмотря на разные шаблоны

Question

Я долгое время пытался равняться размерам изображений на этих трех изображениях. Я знаю, что смог бы сравнять его, применяя левое и правое заполнение в левом и правом столбцах. Как я могу сопоставить размеры изображений и столбцов, даже если применяется различное дополнение?

Как вы можете видеть ниже, центральный столбец/изображение меньше, чем два других из-за различий в заполнении. Как это может быть решено без создания другого отступы слева и справа от правого и левого колонка, так что не будет работать с текущим дизайном

.container-col { 
 
    height: auto; 
 
    display: table; 
 
    margin-bottom: 20px; 
 
} 
 
.column-left, 
 
.column-right, 
 
.column-center { 
 
    width: 33.333%; 
 
    height: auto; 
 
    box-sizing: border-box; 
 
    
 
    border: 1px solid transparent; 
 
} 
 
.column-left { 
 
    float: left; 
 
    padding: 0 8px 20px 0em; 
 
} 
 
.column-right { 
 
    float: right; 
 
    padding: 0 0em 20px 8px; 
 
} 
 
.column-center { 
 
    padding: 0 8px 20px 8px; 
 
    display: inline-block; 
 
    border-left-color: #e5e5e5; 
 
    border-right-color: #e5e5e5; 
 
} 
 
.column-center { 
 
    display: inline-block; 
 
    border-left-color: #aaa; 
 
    border-right-color: #aaa; 
 
} 
 
.top-div { 
 
    height: auto; 
 
} 
 
.bottom-div { 
 
    line-height: 18px; 
 
    height: auto; 
 
} 
 
.bottom-div h5 { 
 
    margin-top: 0px; 
 
    margin-bottom: 10px; 
 
    text-align: center; 
 
} 
 
.top-div img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.game-table { 
 
    border-top: 1px dotted #aaa; 
 
    margin-bottom: 10px; 
 
} 
 
.game-item { 
 
    padding: 8px 0px; 
 
    border-bottom: 1px dotted #aaa; 
 
    height: auto; 
 
} 
 
.game-home { 
 
    float: left; 
 
    width: 44%; 
 
    margin-right: 2%; 
 
    text-align: right; 
 
} 
 
.game-vs { 
 
    width: 8%; 
 
    margin-right: 2%; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 
.game-away { 
 
    float: right; 
 
    width: 44%; 
 
    text-align: left; 
 
}

<br> 
 
<div class="container-col"> 
 
    <div></div> 
 
    <div class="column-center"> 
 
    <div class="top-div"> 
 
     <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img> 
 
    </div> 
 
    <div class="bottom-div"> 
 
     <h5>headline</h5> 
 

 
     <div class="game-table"> 
 
     <div class="game-item"> 
 
      <div class="game-home">home Team</div> 
 
      <div class="game-vs">Vs.</div> 
 
      <div class="game-away">away team</div> 
 
     </div> 
 
     </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div> 
 
    </div> 
 
    <div class="column-left"> 
 
    <div class="top-div"> 
 
     <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img> 
 
    </div> 
 
    <div class="bottom-div"> 
 
     <h5>headline</h5> 
 

 
     <div class="game-table"> 
 
     <div class="game-item"> 
 
      <div class="game-home">home Team</div> 
 
      <div class="game-vs">Vs.</div> 
 
      <div class="game-away">away team</div> 
 
     </div> 
 
     </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div> 
 
    </div> 
 
    <div class="column-right"> 
 
    <div class="top-div"> 
 
     <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img> 
 
    </div> 
 
    <div class="bottom-div"> 
 
     <h5>headline</h5> 
 

 
     <div class="game-table"> 
 
     <div class="game-item"> 
 
      <div class="game-home">home Team</div> 
 
      <div class="game-vs">Vs.</div> 
 
      <div class="game-away">away team</div> 
 
     </div> 
 
     </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div> 
 
    </div> 
 
</div>

Answer 1

.container-col { 
 
    height: auto; 
 
    display: table; 
 
    margin-bottom: 20px; 
 
} 
 
.column-left, 
 
.column-right, 
 
.column-center { 
 
    width: 33.333%; 
 
    height: auto; 
 
    box-sizing: border-box; 
 
    
 
    border: 1px solid transparent; 
 
} 
 
.column-left { 
 
    float: left; 
 
    padding: 0 8px 20px 0em; 
 
} 
 
.column-right { 
 
    float: right; 
 
    padding: 0 0em 20px 8px; 
 
} 
 
.column-center { 
 
    padding: 0 8px 20px 8px; 
 
    display: inline-block; 
 
    border-left-color: #e5e5e5; 
 
    border-right-color: #e5e5e5; 
 
} 
 
.column-center { 
 
    display: inline-block; 
 
    border-left-color: #aaa; 
 
    border-right-color: #aaa; 
 
} 
 
.top-div { 
 
    height: auto; 
 
} 
 
.bottom-div { 
 
    line-height: 18px; 
 
    height: auto; 
 
} 
 
.bottom-div h5 { 
 
    margin-top: 0px; 
 
    margin-bottom: 10px; 
 
    text-align: center; 
 
} 
 
.top-div img { 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 
.game-table { 
 
    border-top: 1px dotted #aaa; 
 
    margin-bottom: 10px; 
 
} 
 
.game-item { 
 
    padding: 8px 0px; 
 
    border-bottom: 1px dotted #aaa; 
 
    height: auto; 
 
} 
 
.game-home { 
 
    float: left; 
 
    width: 44%; 
 
    margin-right: 2%; 
 
    text-align: right; 
 
} 
 
.game-vs { 
 
    width: 8%; 
 
    margin-right: 2%; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 
.game-away { 
 
    float: right; 
 
    width: 44%; 
 
    text-align: left; 
 
}

<div class="container-col"> 
 
    <div></div> 
 
    <div class="column-center"> 
 
    <div class="top-div"> 
 
     <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img> 
 
    </div> 
 
    <div class="bottom-div"> 
 
     <h5>headline</h5> 
 

 
     <div class="game-table"> 
 
     <div class="game-item"> 
 
      <div class="game-home">home Team</div> 
 
      <div class="game-vs">Vs.</div> 
 
      <div class="game-away">away team</div> 
 
     </div> 
 
     </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div> 
 
    </div> 
 
    <div class="column-left"> 
 
    <div class="top-div"> 
 
     <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img> 
 
    </div> 
 
    <div class="bottom-div"> 
 
     <h5>headline</h5> 
 

 
     <div class="game-table"> 
 
     <div class="game-item"> 
 
      <div class="game-home">home Team</div> 
 
      <div class="game-vs">Vs.</div> 
 
      <div class="game-away">away team</div> 
 
     </div> 
 
     </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div> 
 
    </div> 
 
    <div class="column-right"> 
 
    <div class="top-div"> 
 
     <img src="http://static.squarespace.com/static/523ce201e4b0cd883dbb8bbf/t/53bf2302e4b06e125c374401/1405035267633/profile-icon.png"></img> 
 
    </div> 
 
    <div class="bottom-div"> 
 
     <h5>headline</h5> 
 

 
     <div class="game-table"> 
 
     <div class="game-item"> 
 
      <div class="game-home">home Team</div> 
 
      <div class="game-vs">Vs.</div> 
 
      <div class="game-away">away team</div> 
 
     </div> 
 
     </div>Nibh voluptua eleifend sed ne, ex melius maiorum vix, ea case percipit sit. Quo in scripta prodesset, ex nam sonet theophrastus. Read More ...</div> 
 
    </div> 
 
</div>

вы можете попробовать, фиксируя высоту изображения:

.top-div img { 
    width: 100%; 
    height: 200px;// a desired one. 
}