How can I make pictures at the same height? - html

Question

I have this site:
link
CODE HTML:
<div class="grid-sizer"></div>
<!-- # ROW-1 # -->
<div class="row">
<div class="grid-item item-1" >
<img src="<?php echo ot_get_option('left1_img'); ?>" />
</div>
<div class="grid-item item-2">
<img src="<?php echo ot_get_option('center1_img'); ?>" />
</div>
<div class="grid-item item-3">
<img src="<?php echo ot_get_option('right1_img'); ?>" />
</div>
</div>
<!-- # ROW-2 # -->
<div class="row">
<div class="grid-item item-2">
<img src="<?php echo ot_get_option('left2_img'); ?>" />
</div>
<div class="grid-item item-1" >
<img src="<?php echo ot_get_option('center2_img'); ?>" />
</div>
<div class="grid-item item-3">
<img src="<?php echo ot_get_option('right2_img'); ?>" />
</div>
</div>
<!-- # ROW-3 # -->
<div class="row">
<div class="grid-item item-small">
<img src="<?php echo ot_get_option('left3_img'); ?>" />
</div>
<div class="grid-item item-medium" >
<img src="<?php echo ot_get_option('center3a_img'); ?>" />
</div>
<div class="grid-item item-small">
<img src="<?php echo ot_get_option('centerb_img'); ?>" />
</div>
<div class="grid-item item-2">
<img src="<?php echo ot_get_option('right3_img'); ?>" />
</div>
</div>
</div>
CODE CSS:
/* ---- grid ---- */
.item-1,.item-3{
width:40%;
}
.grid {
background: #DDD;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.item-small{
width: 20% !important;
}
.item-medium{
width: 34% !important;
}
.item-2{
width: 25% !important;
}
.grid-sizer,
.grid-item {
width: 37.333%;
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
width: 100%;
}
I put an image to better understand what they want to do.
The images must have a resolution adjustable height depending on.
I tried to .grid-item img {height:316px;} but the low resolution images do not look good.
What they want is to always have a fixed height equal pictures and look good on all resolutions.
Do you think you can help me to find a solution please?
Thank you in advance!

Answer 1

Because there are several fixed images, you can put them in a single img. In this way you can adjust your image a priori.
Furthermore loading a single img is less expensive than loading several imgs (look on Google "css sprite")