Consistent height for responsive images

How do I maintain the same height and proportions of images?

Setting a specific height like 70vh achieves the desired height but distorts image proportions: https://i.sstatic.net/8eJq2.jpg

On the other hand, using height: auto; creates responsive and proportional images but with varying heights: https://i.sstatic.net/7CNfZ.png

Is there a way to combine both methods to have consistent height and maintain image proportions?

HTML:

<main>

<div class="container-fluid">

    <div class="row first-row justify-content-center">

        <div class="flex-wrap col col-xlg-2 col-lg-3 col-12 col-md-6">

            <a href="img/projects/home/1.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test2.jpg" class="img-fluid img"></a>
            
        </div>

        <div class="flex-wrap col-6 col-xlg-8 col-lg-6 col-12 col-md-6">

            <a href="img/projects/home/3.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test1.jpg" class="img-fluid img"></a>
            
        </div>

        <div class="flex-wrap col col-xlg-2 col-lg-3 col-12 col-md-6">

            <a href="img/projects/home/2.jpg" data-lightbox="mygallery" data-gallery="multiimages"><img src="img/projects/home/test2.jpg" class="img-fluid img"></a>
            
        </div>

</div>

CSS:

 .first-row div img
    {
        max-width: 100%;
        height: auto;
    }

Answer №1

Consider using an image as a background on a div element:

HTML:

<div class="bg-cover-center" style='background-image: url("img/projects/home/1.jpg");'></div>

CSS:

.bg-cover-center {
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Remember to set a width or min-width to ensure the div has dimensions, as it won't have any content by default.

Answer №2

Use display: flex on the containing element, set a specific height, and apply width: auto to the image elements.

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

Revealing CSS elements moving from the left to the right

On my website, I have implemented two different menu bars. The first one, in black, stays fixed at the top of the page. The second one, in orange, becomes sticky once it reaches the black bar. At the same time, a small logo image is revealed, previously hi ...

Extracting data from a dropdown menu and displaying it

I've created a form with a select tag that pulls options from a .csv file. However, I'm struggling to retrieve the selected option and display it later in the form. The variable to hold the selected currency is named $selectedCurrency. UPDATE: ...

Adjusting the size of the post title's font

Looking to decrease the font size of the latest post's title and keep it centered on my Jekyll based blog. I attempted to adjust https://github.com/x0v/x0v.github.io/blob/master/_sass/atoms/_feature-title.scss by adding font-size: 45px !important; f ...

Developing an if-else statement to showcase a different div depending on the URL

Having trouble with an if/else statement to display one div or another based on the URL: No matter what I try, only "Div 1" keeps showing. Here's my code snippet: <script> if (window.location.href.indexOf("pink") > -1) { document.getElemen ...

Issue with margins of sections when attempting to activate menu class while scrolling

My Objective: I want to create a website where the menu highlights the section that is currently being viewed as the user scrolls up and down. Progress So Far: I have successfully implemented a functioning menu that changes to "active" when the correspo ...

Switching the color scheme between mobile and desktop devices to make the background look

As a newcomer to threejs, I have just begun learning and developing with this technology. I am aware that certain features may be different on mobile browsers compared to desktop ones due to limitations. However, I have encountered an issue that I cannot s ...

Why does tagging P trigger popups in the DIV when the DIV contains another DIV?

JSBIN HTML <p> <div>123</div> </p> CSS p div{ background:#f00; } Encountering an odd issue here. When I input the HTML structure as shown below: <p></p><div>123</div> The CSS code fails to produce ...

Struggling to position elements at the edges in Bootstrap

My goal is to move the elements to the corners of the screen. Despite trying the code below, it doesn't seem to be working as expected. <!-- Page Footer --> <footer> <div class="navbar mt-3 py-3 bg-dark"> <div class=&q ...

Is it possible to utilize the Wicket:id for generating CSS?

Can the wicket:id attribute of an element or component be used for CSS styling instead of the "class" attribute? For example: .tooltipster-arrow span, .column-shifter { display: block; width: 0; height: 0; position: absolute; } Let&apos ...

The functionality of Bootstrap 5 seems to be disrupted following the incorporation of the Select2 dropdown feature

The Select2 functionality is working correctly, but there seems to be an issue with Bootstrap. After implementing Select2, Bootstrap stops functioning properly. I am currently using Bootstrap version 5.3.The image illustrates that the first select element ...

Creating a dynamic dropdown menu: a step-by-step guide

<ul class="nav navbar-nav friend-label"> <li class="dropdown" ng-repeat="module in modules"> <a href="" class="dropdown-toggle" data-toggle="dropdown"> {{module.ModuleName}} < ...

Looking for a solution to organize the dynamically generated list items in an HTML page

I am currently working on a movie listing website where all the movies are displayed in sequence based on their #TITLE#. The webpage is generated automatically by the software using a template file. Here is the section of code in the template file that sho ...

In React Typescript, the input type="checkbox" does not show any value in the value attribute

I'm facing an issue with displaying text next to a checkbox in React Typescript. When I try to use the value attribute, it doesn't seem to work as expected. Also, attempting to set innerHTML throws an error stating that input is a void element ta ...

What could possibly be causing the "Unexpected token (" error to appear in this code?

Sorry if this appears as a typo that I am struggling to identify. My browser (Chrome) is highlighting the following line <a class="carousel-link" onclick="function(){jQuery('#coffee-modal').modal('show');}">Book a coffee</a> ...

confirm that the form is necessary and contains text

How can I ensure that a specific text string is validated for the input field labeled "promo"? Take a look at the code snippet below: <script> function validateForm() { var x = document.forms["myInquiry"]["promo"].value; if (x == null || x == "") ...

Adding content between previous and next buttons with the use of JavaScript

After successfully implementing the functionality for the previous and next buttons in my script, I was requested to include the date between the buttons like this: btnPrev issueDate btnNext < Date > Although I tried adding the date between the PREV ...

Swapping out LinkButtons using jQuery

[EXPLANATION] (apologies for the length) In my gridview, users have the option to add a new entry or edit an existing one. When they click on either 'Add' or 'Edit', a popup window appears for them to input the information for the new ...

What is the best way to dynamically set minDate for a datetime-local input field?

I need assistance with setting up two input fields: one for the start date and one for the end date. I want the end date to automatically populate with the same value as the start date when the start date is filled, and have the minimum value set to be the ...

Is it possible to restrict the draggable area?

Looking at this JSFiddle example, there is a box that can be dragged around the body. But, is it feasible to restrict dragging only when the user clicks on the purple section identified by the id "head"? $(document).ready(function(){ $( "#box" ).dra ...

Having issues with the Jquery tablesorter plugin when attempting to prevent headers from being sorted

Can anyone help me with a sorting issue I am having with a table on my website? I am using the jQuery plugin tablersorter to sort the table, but I have two headers that I do not want to be sortable. I tried to disable them using the example provided on the ...