Img resize to same width and height - html

Question

Is there any img resize for this so that they can be on all same ratios? Because this would happen if it's not on the same image ration. My problem is that it all became like this..
Here is my html code for the card:
<div class="container">
<div class="flex-row row">
<div class="col-xs-6 col-sm-4 col-lg-3">
<div class="thumb">
<div class="caption card card-default">
<div class="card-img">
<img src="user_images/<?php echo $row['userPic'] ?>" alt="Card image" class="img-thumbnail" height="100">
</div>
<!-- Extra div added to enable alignment at bottom -->
<div class="excludingImage">
<div class="card-body">
<p class="card-text" style="color:#00873a"><b><?php echo $cartname ?></b></p>
<p class="card-text" style="color:#e81b30"><strike style="color:#aaa">₱<?php echo $orig ?>.00</strike> ₱<?php echo $cartprice ?>.00</p>
</div>
<div class="card-footer text-center">
<button type="button" class="btn btn-pink btn-sm"><i class="fa fa-shopping-cart"></i> View Product </button></div>
</div>
</div>
<!-- /.caption -->
</div>
<!-- /.thumbnail -->
</div>
</div></div>
and here is my CSS:
/* Flexbox Equal Height Bootstrap Columns (fully responsive) */
#media only screen and (min-width : 500px) {
.flex-row.row {
display: flex;
flex-wrap: wrap;
}
.flex-row.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
.flex-row.row:after,
.flex-row.row:before {
display: flex;
}
.flex-row.row > [class*='col-'] > .box {
display: flex;
flex: 1;
}
}
/* Grow thumbnails to fill columns height */
.flex-row .thumb,
.flex-row .caption {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
/* Flex Grow Text Container */
.flex-row .caption p.flex-text {
flex-grow: 1;
}
/* Flex Responsive Image */
.flex-row img {
width: 100%;
height: auto;
}
.thumb{
padding-bottom: 10px;
}
.caption{
}
/* EXAMPLE 2 - CSS TABLES EQUAL HEIGHT
- ie9 support
- not responsive (mobile fallback)
*/
.table-row.row,
.table-row-equal {
display: table;
width: 100%;
table-layout: fixed;
word-wrap: break-word;
}
.table-row.row [class*="col-"] {
width: 25%;
}
.table-row.row [class*="col-"],
.table-row-equal .thumb {
float: none;
display: table-cell;
vertical-align: top;
}
.table-row-equal {
border-spacing: 30px 0px;
}
.table-row-equal .thumb {
width: 1%;
}
/* mobile fallback to support partial responsiveness */
#media only screen and (max-width: 500px) {
.table-row-equal .thumb {
display: block;
width: 100%;
}
}
/* MASONARY BOOTSTRAP 3 GRID
- Who needs V4?
*/
.masonary-row.row {
-webkit-column-gap: 30px;
column-gap: 30px;
padding-left: 15px;
padding-right: 15px;
word-wrap: break-word;
-webkit-column-fill: balance;
column-fill: balance;
}
.masonary-row [class*="col-"] {
display: inline-block;
width: 100%;
height: 100%;
float: none;
padding: 0px;
-webkit-column-fill: balance;
column-fill: balance;
}
#media (min-width: 480px) {
.masonary-row.row {
-webkit-column-count: 2;
column-count: 2;
}
}
#media (min-width: 768px) {
.masonary-row.row {
-webkit-column-count: 3;
column-count: 3;
}
}
/* demo */
.bootflex .well {
flex-grow: 1;
}
/* pre hack for small devices */
pre {
display: flex;
flex: 1;
}
.flex-row.flex-code.row > [class*='col-'] .flex-text {
flex-grow: 1;
display: flex;
}
.overview {
display: flex;
padding-right: 10px;
}
.card-default {
display: flex;
flex-wrap: wrap;
}
.card-default>* {
width: 100%;
}
.excludingImage {
align-self: flex-end;
text-align: center;
}
.card {
background-color: #fff;
border: 1px solid transparent;
border-radius: 6px;
}
.card>.card-link {
color: #333;
}
.card>.card-link:hover {
text-decoration: none;
}
.card>.card-link .card-img img {
border-radius: 6px 6px 0 0;
}
.card .card-body {
/* display: table;
width: 100%; */
padding: 12px;
}
.card .card-header {
border-radius: 6px 6px 0 0;
padding: 8px;
}
.card .card-footer {
border-radius: 0 0 6px 6px;
padding: 8px;
}
/*
.card .card-left {
position: relative;
float: left;
padding: 0 0 8px 0;
}
.card .card-right {
position: relative;
float: left;
padding: 8px 0 0 0;
}
*/
.card .card-body h1:first-child,
.card .card-body h2:first-child,
.card .card-body h3:first-child,
.card .card-body h4:first-child,
.card .card-body .h1,
.card .card-body .h2,
.card .card-body .h3,
.card .card-body .h4{ margin-top: 0; }
.card .card-body .heading{ display: block; }
.card .card-body .heading:last-child{ margin-bottom: 0; }
.card .card-body .lead{ text-align: center; }
#media( min-width: 768px ){
.card .card-left{ float: left; padding: 0 8px 0 0; }
.card .card-right{ float: left; padding: 0 0 0 8px; }
.card .card-4-8 .card-left{ width: 33.33333333%; }
.card .card-4-8 .card-right{ width: 66.66666667%; }
.card .card-5-7 .card-left{ width: 41.66666667%; }
.card .card-5-7 .card-right{ width: 58.33333333%; }
.card .card-6-6 .card-left{ width: 50%; }
.card .card-6-6 .card-right{ width: 50%; }
.card .card-7-5 .card-left{ width: 58.33333333%; }
.card .card-7-5 .card-right{ width: 41.66666667%; }
.card .card-8-4 .card-left{ width: 66.66666667%; }
.card .card-8-4 .card-right{ width: 33.33333333%; }
}
/* -- default theme ------ */
.card-default{
border-color: #ddd;
background-color: #fff;
margin-bottom: 24px;
}
.card-default > .card-header,
.card-default > .card-footer{ color: #333; background-color: #fdfdfd; }
.card-default > .card-header{ border-bottom: 1px solid #ddd; padding: 8px; }
.card-default > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
.card-default > .card-body{ }
.card-default > .card-img:first-child img{ border-radius: 6px 6px 0 0; }
.card-default > .card-left{ padding-right: 4px; }
.card-default > .card-right{ padding-left: 4px; }
.card-default p:last-child{ margin-bottom: 0; }
.card-default .card-caption { color: #fff; text-align: center; text-transform: uppercase; }
/* -- price theme ------ */
.card-price{ border-color: #999; background-color: #ededed; margin-bottom: 24px; }
.card-price > .card-heading,
.card-price > .card-footer{ color: #333; background-color: #fdfdfd; }
.card-price > .card-heading{ border-bottom: 1px solid #ddd; padding: 8px; }
.card-price > .card-footer{ border-top: 1px solid #ddd; padding: 8px; }
.card-price > .card-img:first-child img{ border-radius: 6px 6px 0 0; }
.card-price > .card-left{ padding-right: 4px; }
.card-price > .card-right{ padding-left: 4px; }
.card-price .card-caption { color: #fff; text-align: center; text-transform: uppercase; }
.card-price p:last-child{ margin-bottom: 0; }
.card-price .price{
text-align: center;
color: #337ab7;
font-size: 3em;
text-transform: uppercase;
line-height: 0.7em;
margin: 24px 0 16px;
}
.card-price .price small{ font-size: 0.4em; color: #66a5da; }
.card-price .details{ list-style: none; margin-bottom: 24px; padding: 0 18px; }
.card-price .details li{ text-align: center; margin-bottom: 8px; }
.card-price .buy-now{ text-transform: uppercase; }
.card-price table .price{ font-size: 1.2em; font-weight: 700; text-align: left; }
.card-price table .note{ color: #666; font-size: 0.8em; }
Thanks! It would help me a lot to know if my img tag can be resized for same width and height.. so my card won't be like from the above..

Answer 1

You can set a "frame" to crop out/hide the extra width/height you want so they are all seen as the same dimensions, you need to wrap your img in a div and apply some styling to it.
You can see the concept here. I have made the image to crop to center, but easily changeable.
HTML
<div class="img-wrap">
<img src="https://placehold.it/250x200" class="img-wrap__img">
</div>
<div class="img-wrap">
<img src="https://placehold.it/550x700" class="img-wrap__img">
</div>
CSS
.img-wrap {
position: relative;
width: 200px;
height: 150px;
overflow: hidden;
}
.img-wrap__img {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Answer 2

You can use padding-top trick to control the aspect ratio of the container.
HTML
<div class="square"
style="background-image: url('https://dummyimage.com/120x80/000/fff.png')">
</div>
CSS
.square {
width: 90px;
border: 1px solid #ccc;
border-radius: 8px;
background-position: center center;
background-repeat: no-repeat;
}
.square::before {
content: '';
display: block;
padding-top: 100%;
}