Rahul.Valani Rahul.Valani - 3 months ago 8
CSS Question

How to make all images look same

I am new to web developing, and forgive me if this is very naive question but I am facing an issue where I have a row which has 7 images basically certification that My company has. They all are different size and color and doesnt look good together.
I am trying to make them all look same size and responsive.
So far I have used:

clip: rect(0px,60px,200px,0px);


but this just cuts the images, so I need some other solution which can fix this
My first image is 250*100px whereas other is 250*250px likewise I have 7 images all different size so I have set max-width:250px; height:auto; and this is how it look now:
enter image description here

CSS:

.ribbon img{
height:150px;
margin: 2px 2px 2px 2px;
}

.ribbon img:hover{
border: solid 1px black;
-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px black;

}
.ribbon{
vertical-align:center;
}


What I am trying to get is those first to image should come in center I have tried vertical-align:middle but doesn't work and the PCGS image is full size 250*250 so it is the problem

Answer

You could try img { height: 250px; } to makes all img with the same height, browser will handle the width onscale if you leave the width not set

Edit 1 -

If you want they have the same width, you may replace the height with width that setup the value you want, please try this example, https://jsfiddle.net/e7wv86pc/

img { width: 14%; }