What is the best way to organize images of varying dimensions that are provided by the user all within the same card layout

Users have posted images from the database, but the issue arises when the images have different dimensions within the card.

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

If we set fixed height and width, the image loses its original ratio.

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

However, I want the picture to maintain its original form while allowing its height or width to change within the card like this:

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

{% for post in show_posts %} 
   <div class="col-md-6 col-lg-4 mb-4">
      <div class="card listing-preview">
       <img class="card-img-top" src="{{ post.photo.url }}" alt="">
      <div class="card-body">
       <div class="listing-heading text-center">
        <h4 class="text-primary">{{ person.name }}</h4>
       </div>
       <hr>
      <div class="row py-2 text-secondary">
           <div class="col-12">
             City: {{ post.city }}</div>
           </div>
      <div class="row py-2 text-secondary">
           <div class="col-12">
                 Area: {{ post.area }}</div>
             </div>
             <hr>
             <div class="row text-secondary pb-2">
               <div class="col-12">
                 <i class="fas fa-clock"></i> {{ person.list_date timesince }}</div>
          </div>
        </div>
        </div>
       </div>
      {% endfor %}

Answer №1

Determine the maximum height for card-img-top.

The CSS property known as max-height establishes a ceiling on how tall an element can be, preventing it from surpassing the specified limit set by max-height. - https://developer.mozilla.org

.card-img-top {
   max-height: 300px;
   width: auto;
}

Answer №2

Consider this scenario: If you want all images to be the same size, you can use the following CSS rule

.card{ height:300px; width:300px; }

.card img{width:100%; object-fit: contain;}

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

Thumbnails failing to line up in a continuous row

Having an issue creating a row with 3 thumbnails as they are not aligning in a single row, instead each thumbnail is going into a different row. echo "<table>"; echo "<tr>"; echo "</tr>"; while($r ...

When you zoom in or out, HTML5 elements styled with CSS will dynamically adjust

Hey everyone, I have a question about a problem I'm facing with my HTML and CSS page. The issue is that when I zoom in, the "Section" part moves underneath the nav bar, and when I zoom out, the footer moves next to the section part... Below is a sni ...

Navigation bar limited to text links only

I've checked out similar inquiries, but I couldn't find a solution that fits my situation. I'm looking to make the boxes around each text link clickable, as opposed to just the text itself. HTML <div class="container"> <ul cla ...

Placing three div elements within a container, one of which has a height set to auto

I need help arranging 3 divs side by side using float:left. The height for two of the div's (child1 and child3) is fixed, but there is no set height for child2 - I would like child2 to have the same height as the container div. <div id="container ...

"Experiencing technical difficulties: Website not functioning properly on

I recently created this website. While it functions perfectly on desktop computers, I am encountering issues when trying to access it on mobile or tablet devices. My instinct tells me that the problem may be related to a large css animation on the homepa ...

Ensure images are correctly aligned

Could really use some help with this issue I'm having. It's probably a simple fix for all you experts out there, but I can't seem to align my images properly so they are even and not one higher than the other. Please take a look at the scree ...

Aligning form fields in a HTML form using Bootstrap

In my extensive form, several fields within the setup encounter the same issue. Specifically, a checkbox below 'contact telephone number' causes the surrounding content to become misaligned. https://i.sstatic.net/8qI8Z.png My attempts to resolv ...

Struggle of UL vs. LI Designs

Currently, I am tackling a web development project that entails a CSS file known as Style.css. Inside this file, a styling series is outlined for UL and LI elements, which have been implemented across various parts and sections of the project. The setup lo ...

ToggleButton4 Framework is a user-friendly tool for creating interactive

I am currently working with Bootstrap 4 to design a toggle button; however, when I click the button, the checkbox does not update, despite the fact that the active class is being applied. Even when I use $('.btn-group-toggle').button('toggl ...

Tips on eliminating the gap between the dropdown menu in Firefox browser

After testing in Chrome and seeing no issues, I noticed that the input field's position changes and there is spacing between the dropdowns when opening in Firefox. View in Firefox browser: https://i.stack.imgur.com/WYpuy.png View in Chrome browser: ...

Javascript functions properly on Chrome, Opera, and Edge browsers, but unfortunately does not work on FireFox and IE 11

If you're interested, I have some code available on JS Fiddle that showcases my skills. var getJSON = function (url) { "use strict"; return new Promise(function(resolve, reject) { var xhr = new XMLHttpRequest(); xhr.open('get' ...

Is there a way to ensure that text remains inside an unconventional image while scrolling?

I am trying to achieve a torn and indented effect on an image on my webpage, with rough edges and an inner shadow. I want the content on top of this image to scroll underneath the torn edges without extending beyond the visible area of the image. The image ...

Insider's guide to showcasing code in vibrant colors using Python Django

Context: I am currently working on a Python Django web application and need to showcase code snippets in the browser with syntax highlighting. An example of the code snippet I want to display would be: if True: print("Hello World") I am look ...

How can we create a stylish HTML table using CSS display:table and SASS in a sophisticated manner?

Is there a more stylish approach to styling this HTML table using CSS display: table with Sass? Instead of using traditional table elements, I have created a table layout using display: table CSS styles applied to div elements: <div style="display: ...

Concealing Bootstrap 3 elements on a split-screen layout

I encountered a peculiar issue with Bootstrap 3. When I resize my browser width to half the screen, there is a slight 1px threshold where both "hidden-xs" and "hidden-sm" elements become visible simultaneously. Is there a way to fix this so that only one o ...

Issue of Modal not hiding persists despite attempted solutions using JS, jQuery, and CSS

I am attempting to display a modal exclusively on mobile devices. Despite my confidence in the correctness of my JavaScript, it is not functioning as expected. Would anyone be willing to review and provide assistance? <div class="col-5 col-sm-2 ml-au ...

The image sits on the edge of the container, not fully contained

.sub2 { background-color: #FFFFBF; margin-top: 30px; height: 410px; width: 100%; } h1.sub2 { font: bold 100px american captain; text-decoration: underline; float: right; } p.sub2- { font: italic 25px american captain; margin-top: -300px; ...

Adjusting background-position-x while scrolling

I came across Ian Lunn's Parallax tutorial and found it really interesting. The tutorial can be accessed at . My goal is to enhance the effect by not only changing the y-position of the background but also adding horizontal movement based on scroll in ...

z-index in CSS causes links to conflict

I am currently working on a project that requires an image to be displayed prominently on the website along with some links positioned behind it. However, I'm facing an issue where I can't click on the links after implementing z-indexes to layer ...

What is the best way to arrange multiple elements on the second row within a div?

As I attempt to utilize CSS for positioning elements within a div, my challenge lies in the limitation of only being able to use classes/ids due to the fact that the div and its content are generated from a third-party plug-in (datatables). This restricts ...