Adjust image size to maintain consistent dimensions

Is there a way to resize the images so they maintain the same aspect ratio? Currently, all the images are appearing distorted.

https://i.sstatic.net/czpto.png

Here is the 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">
                            <a href="shopview.php?prod=<?php echo $cartname ?>"><button type="button" class="btn btn-pink btn-sm"><i class="fa fa-shopping-cart"></i> View Product </button></a></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; }

Thank you! It would be helpful to find out if the img tag can be resized to maintain consistent width and height to avoid issues with the layout.

htmlcss

Answer №1

To ensure all images are displayed at the same dimensions, you can create a "frame" to crop out any extra width/height. Simply wrap your img in a div and add some styles to achieve this.

The image cropping concept is demonstrated below with an example of center-cropping that can be easily customized.

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

One way to manipulate the aspect ratio of a container is by using the padding-top trick.

Here's an example in HTML:

<div class="square"
     style="background-image: url('https://dummyimage.com/120x80/000/fff.png')">
</div>

And the corresponding CSS code:

.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%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the inability to place a div that is 30% wide alongside another div that is 70% wide, and keep them in a horizontal line?

If I make a div that is 30% wide, and another div that is 70% wide, they do not align horizontally. To fix this, I need to ensure that the combined widths of the two divs are less than 100%. Here's an example of how it can be done: <div id="wrapp ...

htmlcss

How can the distinctions between two bars be illustrated in high charts?

Is there a way to display different values on a new line between two bar charts using Highcharts plugins? I have created a simple bar chart in Highcharts, but I am looking to show the difference between the two bars on a new line. The concept is illustrate ...

javascriptjqueryhtmlsvghighcharts

Open the iframe link in the main window

As a newcomer to this platform, I am trying to figure out how to make a link open in the parent page when clicking a button within an iframe. Currently, my code opens the link in a new window. <html> <body> <form> <div class ...

javascripthtmliframe

The applied style of NextUI Components may be inconsistent, appearing to not apply in certain instances even though it does work

I've hit a roadblock trying to solve this issue. While using NextUI, I've managed to successfully apply styles to some components like the navbar, indicating that I have correctly installed NextUI and configured Tailwind. However, I'm facing ...

cssnext.jstailwind-cssnextui

Is there a way to deactivate other dropdown options?

To simplify the selection process, I would like to disable the options for "Province", "City", and "Barangay". When the user clicks on the "Region" field, the corresponding "Province" options should be enabled. Then, when a specific province is selected, t ...

javascriptphphtml

Modifying SVG gradients with JavaScript

My goal is to modify the stop color of a gradient displayed in an SVG element. I've been trying to adjust the stop-color attribute, but so far, my attempts have not been successful: <svg><defs> <linearGradient gradientTransform="rotat ...

javascripthtmlsvggradient

Utilizing Bootstrap 4 to create fixed and fluid width side-by-side divs with scrollbars

I want to create a basic dashboard page. I decided to arrange two divs next to each other to serve as the side menu and content. Here is what the layout looks like: https://i.sstatic.net/EATK6.png I encountered an issue where the vertical scrollbar is n ...

csshtmltwitter-bootstrapbootstrap-4dashboard

Selecting radio buttons using Bootstrap and JavaScript

I'm interested in incorporating this bootstrap radio selection feature into my JavaScript code. For example, if option1 is true, I want to execute a specific action... How can I achieve this? <div class="alert alert-info" role="alert"> < ...

javascripthtmltwitter-bootstrap-3

Seeking assistance with my personal portfolio project - any takers?

I'm facing an error on a coding challenge that says: "The height of the welcome section should be equal to the height of the viewport." I have set it to 100vh but I'm unsure how to resolve it. Here is the HTML code: <header> <nav id=& ...

htmlcss

Excessive text in the input text area causing overflow

I am experiencing a minor issue with the primefaces inputTextArea. Whenever the text exceeds the assigned panel height, it overflows behind the next panel. Interestingly, clicking into the textarea resolves the problem temporarily, but on initial page view ...

htmleclipsejsfprimefacestextarea

Which JSF element is capable of displaying a <div> element?

For example, h:inputText will display an "input type='text'". Which JSF tag is used to render a "div" element? ...

jsfhtml

Utilize Python and Selenium to extract a URL from HTML code

While seeking assistance with a dropdown menu in a table, I came across this problem. The issue at hand involves fetching the URL from the source code snippet below: <a href="#" onclick="window.open('/consultas/util/pdf.php?type=rdd ...

pythonhtmlpython-3.xseleniumpdf

What's the name of the auto-triggered dropdown menu feature?

Visit Amazon's official website Description: Within the 'Shop by Department' section- A drop-down menu that remains visible without requiring you to hover over it. However, when the browser is in a non-full-screen mode, the menu disappears ...

jquerycssmenu

The jQuery script automatically triggers submission on its own

Does anyone have an idea why the form auto-submits itself? I can't figure out why it's doing that. I'm using query parsley to validate the form in a modal. When a user opens the modal and starts typing in the text area, they must type at l ...

javascriptjqueryhtmlajax

problem with placing text into input field

When using my search program, I am encountering an issue where there is some added space before the text once it is set into the input box after clicking on a search result. To see the problem in action, you can visit the following link: http://jsfiddle. ...

jqueryhtml

Unable to generate a navigation panel using HTML/CSS and jQuery

I recently completed the basic courses in HTML/CSS, JavaScript, jQuery, and PHP on Codecademy. I'm currently working on creating a website using HTML/CSS and jQuery in Codecademy's codebits. However, I'm facing some issues with my navigation ...

jquerycss

Iterating over an array and displaying elements on the webpage

Struggling to access an array and loop through it, but only able to print out one element instead of all. Need a hint on how to solve this issue. See my code below: let toppingsCount; const burger = document.createElement('div'); const toppingsD ...

javascripthtmlcssdomcss-selectors

- Prefixing with -webkit-transform and overlooking z-index

When using Safari 5.1.7 on Windows, I noticed that some rotated elements are overlapping others: However, when I test it on Firefox, Chrome, and IE, the issue doesn't occur: Is there a solution to prevent this overlap problem specifically on Safari? ...

htmlcsssafaritransform

Display a list of personalized post types and emphasize the item that is currently being viewed

I've created a unique type of post called 'product'. Every product page has a sidebar listing all products, with the current product displayed in bold text. For instance, when viewing product 3, it should appear like this: Sidebar Pr ...

phpcsswordpress

The layout consists of two divs: one with a fixed height, while the other dynamically adjusts to occupy the

I am facing an issue with two div elements within a parent container. One div has a fixed height, and the other should fill up the remaining space in the parent container. The height of the parent container is dynamic and can vary between 100px, 200px, or ...

htmlcss