Two eye-catching visuals with varying widths but equal heights

Is there a way to have 2 dynamic images in a row with different widths but the same height, while maintaining the aspect ratio of both images?

In simpler terms, I want the height of the row to be determined by the taller image so that the second one fills the space until they are equal in size.

https://i.sstatic.net/7QPBQ.png

I've been unable to figure out how to do this without manually setting the ratios myself.

Any suggestions or ideas on how to achieve this?

Thank you!.

cssimageresponsive

Answer №1

This solution is working perfectly ->

// javascript for loading images with aspect ratio adjustment using jQuery
$(function() {
  $(".image-aspect-fit").each(function (index){
    const el = this;
    // create a new image object to determine actual width
      const image = new Image();
    image.onload = function () {
      const aspectRatio = image.width / image.height;
      el.style.flexGrow = aspectRatio;
      el.style.flexBasis = image.width / 100 + "px";
      el.style.width = image.width / 100 + "px";
      el.style.display = "block";
    }
    image.src = el.getAttribute("src");
  })
});
.image-container {
  display: flex;
}

.image-aspect-fit {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container">
<img src="https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom.png" loading="lazy" sizes="100vw" srcset="https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom-p-500.png 500w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom-p-800.png 800w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom-p-1080.png 1080w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom-p-1600.png 1600w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom-p-2000.png 2000w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom-p-2600.png 2600w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60b493985c51829487d70980_Scooter-top-bottom.png 3840w" alt="Scooter - image top/bottom" class="image-aspect-fit">
  
<img src="https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60951962327984f3348e76cb_kytara_3.jpg" loading="lazy" sizes="100vw" srcset="https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60951962327984f3348e76cb_kytara_3-p-500.jpeg 500w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60951962327984f3348e76cb_kytara_3-p-800.jpeg 800w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60951962327984f3348e76cb_kytara_3-p-1080.jpeg 1080w, https://uploads-ssl.webflow.com/606eb4debf613f8fc3b62164/60951962327984f3348e76cb_kytara_3.jpg 1576w" alt="guitar image
" class="image-aspect-fit">
</div>

Answer №2

Unfortunately, neither of the two solutions I explored successfully resolved this issue. However, I am sharing my findings in hopes of sparking inspiration for other potential answers. (I recommend viewing these demos on the "full page" setting to see them properly; please note that the example images are of differing dimensions).

A simple flexbox configuration disrupts the aspect ratio: 

.images {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
 }
.images > .img { position: relative; }
.images > .img > img { height: 100%; }
<div class="images">
  <img src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/bison-image-680x425.jpg" />
  <img src="https://cdn101.picsart.com/208783124002202.jpg?type=webp&to=min&r=640" />
</div>

Introducing an additional container around each image results in an intriguing scenario where the aspect ratio is maintained, but bounding issues arise: 

.images {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
 }
.images > .img { position: relative; }
.images > .img > img { height: 100%; }
<div class="images">
  <div class="img">
    <img src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/bison-image-680x425.jpg" />
  </div>
  <div class="img">
    <img src="https://cdn101.picsart.com/208783124002202.jpg?type=webp&to=min&r=640" />
  </div>
</div>

If you can specify a fixed height, using height: 100% can quickly resolve this issue:

.images {
  position: relative;
  font-size: 0;
  height: 200px;
  white-space: nowrap;
}
.images > img { height: 100%; }
<div class="images">
  <img src="https://hddesktopwallpapers.in/wp-content/uploads/2015/09/bison-image-680x425.jpg" />
  <img src="https://cdn101.picsart.com/208783124002202.jpg?type=webp&to=min&r=640" />
</div>

Answer №3

To replicate the height style of the first image to the second using jQuery, follow these steps:

 $(document).ready(function() {
     var FirstImgHeight = $(".firstImg").height();
     // alert(FirstImgHeight );

     $(".secondImg").css("max-height", FirstImgHeight)
 })


        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 100%
        }


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6949999828582849786b6c3d8c6d8c7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">

        <div class="row">
            <div class="col-sm-7">
                <img class="firstImg"
                    src="https://images.ctfassets.net/hrltx12pl8hq/7yQR5uJhwEkRfjwMFJ7bUK/dc52a0913e8ff8b5c276177890eb0129/offset_comp_772626-opt.jpg?fit=fill&w=800&h=300" />
            </div>
            <div class="col-sm-5">
                <img class="secondImg" src="https://webmeup.com/upload/blog/lead-image-105.png" />
            </div>
        </div>
    </div>

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

The full background width is not being displayed as 100% on the

Unexpectedly, the "full left secondary-bg" background division on this particular page (http://goo.gl/OU4MkW) is no longer spanning the full width of the screen and I am unable to figure out why. This website is WordPress-based and constructed using the sk ...

phphtmlcsswordpress

The CSS code for ::before is not functioning properly

Trying to enhance the style in Ionic2, I have a message box: https://i.sstatic.net/PCRtA.png I am attempting to integrate this image into it: https://i.sstatic.net/PSQID.png To create a seamless look with the message box. Facing an issue where the ima ...

cssionic2

adjust the dimensions of the clickable icon's background

Is there a way to expand the pressable area of a close icon without altering its size? For example, if the icon is 19X19 pixels, can the pressable area be increased to 39X39 pixels? The concern lies with the div element containing the close button and the ...

htmlcss

Using jQuery and AJAX to intermittently update the source of the background image

I'm attempting to update the background image of my page's body every N seconds by calling a PHP function that retrieves a random image source via AJAX. However, despite trying to replace the current background image source with the newly generat ...

phpjqueryajaximagebackground

Division of two "div" sections

I have designed my webpage using three separate div elements for [logo, brand name], [product details], and [hamburger icon]. However, when applying display=flex and flex=1 in the CSS, I noticed that the last two elements are getting stuck together. Can so ...

htmlcss

Scrolling a table to the current ng-init date in AngularJs: What’s the best approach?

I found a code snippet in my DOM that sets the current date on a table. <table id="daysTableLeft" class="table table-hover" ng-init="getHorraire(pickDateRow,$index,0)"> <tr ng-repeat="fd in getFullDayDate track by $index ...

jqueryhtmlcssangularjs

Creating Flexible Designs - Implementing a responsive sidebar with dynamic scrolling

I am in the process of developing a simple web application that features a sidebar whose vertical size is dependent on the number of elements it contains. My goal is to make the web app responsive, ensuring it works well on devices of any size. In cases ...

htmlcssflexboxheightoverflow

Run various CSS animations repeatedly

I recently created a captivating text fade-in, fade-out animation consisting of four lines. Each line elegantly appears one after the other, creating a mesmerizing effect. However, there's now a request to have these animations run in an infinite loop ...

csscss-animations

What class is utilized when multiple classes are specified?

When an element has two classes assigned to it and the CSS for the two classes conflict with each other, which one takes precedence? Is there a method to determine which one will be used? For instance: <p class='red small'>Some Text Here& ...

htmlcss

Element 1 is positioned with a CSS top attribute of x% and a height of y%, while Element 2 has a CSS top value of (x+y)%. What is the reason behind the discrepancy in

I am encountering a problem with sizing. Desired Outcome: My goal is to use resizable and draggable functionality along with JavaScript code to position elements on the screen by setting their top, left, height, and width. I aim to resize an element unti ...

javascripthtmljquerycssjquery-ui

The Carousel Slider malfunctions when attempting to set up multiple carousels

I recently created a carousel slider that seems to be behaving incorrectly when multiple carousels are added. It should slide by one item at a time. For instance, with only one carousel, it slides by one item; with two carousels shown, it slides by two ite ...

javascriptjqueryhtmlcss

A fading transparency box on the border

Looking for a box with varying opacity from left to right (See image for reference - the red marked box has decreasing opacity from right to left). Here is my attempt: .waterMark { background-color: #FFFFFF; float: right; opacity: 0.6; position: ...

htmlcss

What's the best way to layer a fixed div over an absolutely positioned div?

I am in the process of developing a small web application. In this project, I have two div elements - one is set to absolute positioning and the other to static positioning. My goal is to position the static div on top of the absolute div, ensuring that it ...

htmlcss

Tips for halting the navigation bar when scrolling

Creating a Navigation Bar: <div class="navigation-bar"> <div class="item">Home</div> <div class="item">About us</div> <div class="item">Our Services</div> <div class="item">Contact us</div ...

javascripthtmlcss

Is there a way to programmatically update a webpage using Javascript?

I have been attempting to set up the code in a way that the page automatically changes using setTimeout. However, I am unable to make it work. setTimeout()(page3, 500); function page3() { changepage3('automatic') } Even though my code is str ...

javascriptjqueryhtmlcsssettimeout

What is the best way to trigger the download of an image file created by PHP to a user's computer?

My PHP code (upload.php) allows users to upload an image from index.html, resize it, add a watermark, and display it on the same page. Users can download the watermarked image by using the 'Save image as...' option. The resized image is saved in ...

javascriptphpjqueryhtmlimage

Fieldset containing a table with a horizontal scrollbar

One issue I encountered in my application was dealing with a fieldset that contained table data with potentially many columns. To prevent the browser window from acquiring a horizontal scroll bar due to the wide table, I attempted to wrap the table in a c ...

htmlcssfirefox

What is the best way to create rounded edges for a spinning spinner using CSS?

Check out my fiddle link here! I managed to create a spinning spinner using CSS, however, I am struggling to round the edges of the black part that is spinning/moving. Can someone help me achieve this effect? .loader { position: relative; border: ...

jqueryhtmlcsscss-transitionsloader

Adding the BETA symbol to your Bootstrap navbar is simple and can be done by

Is there a way to include a "BETA" symbol at the top of the "Brand Name" on my Navbar, similar to the "TM" symbol? How can this be achieved? ...

htmlcssbootstrap-4

"CSS: Mastering the Art of Color Curves

Is there a way to achieve this with just HTML and CSS? ...

htmlcss