How can CSS and JavaScript be used to strategically position two upright images next to each other within a dynamically resizing container?

Question

How can CSS and JavaScript be used to strategically position two upright images next to each other within a dynamically resizing container?

Looking for a way to display two portrait images side by side within a flexible container with 100% width? The challenge I'm facing is accommodating varying widths of the images while ensuring they are the same height.

<div class="container">
       <p>Some Text</p>
       <img src="this-is-a-landscape-image.jpg" alt="test"/>
       <p> Some Text again</p>
       <img class="portait" src="this-is-a-portrait-image.jpg" alt="test"/>
       <img class="portrait" src="this-is-a-portrait-image.jpg" alt="test"/>
</div>

The issue at hand: I need to fit two images with the .portrait class into a responsive layout where the container's width is set at 100%. While the heights should be the same, the widths can vary due to different ratios of the images.

Is there a CSS solution using flexbox or perhaps a bit of JS that can achieve this without hardcoding the values as the content is generated dynamically through a CMS?

Do you have any innovative ideas to tackle this challenge?

javascript css flexbox

Answer 1

Answer №1

It seems challenging to find a completely dynamic solution using only CSS, but I welcome any evidence to the contrary!

If you want to experiment with image sizes, window dimensions, and gutter width while maintaining consistent height for both images and proportional width, you can check out my quick jQuery solution here: http://jsfiddle.net/d2gSK/2/

The JavaScript code is as follows:

    // Encapsulate in a function for easy reuse
    function fitImages(img1, img2, gutter) {
        var $img1 = $(img1);
        var $img2 = $(img2);
        
        var ratio1 = $img1.width() / $img1.height();
        var ratio2 = $img2.width() / $img2.height();
        
        var targetWidth = $img1.parent().width() - gutter;

        var width1 = targetWidth / (ratio1+ratio2) * ratio1;
        var width2 = targetWidth / (ratio1+ratio2) * ratio2;

        $img1.width(width1);
        $img1.height(width1 / ratio1);
        $img2.width(width2);
        $img2.height(width2 / ratio2);

        $img1.css('paddingRight', gutter + 'px');

    }

    $(document).ready(function() {
        var $wrapper = $('.portrait-wrapper');
        fitImages($wrapper.children().get(0), $wrapper.children().get(1), 20);

        $(window).resize(function() {
            fitImages($wrapper.children().get(0), $wrapper.children().get(1), 20);
        });
    });

I have provided detailed explanations within the code itself. Feel free to ask if you need further clarification.

Keep in mind that I placed a wrapper around the images and applied display: block and float:left to them, as these styles are necessary for the functionality to work correctly!

Answer 2

It seems challenging to find a completely dynamic solution using only CSS, but I welcome any evidence to the contrary!

If you want to experiment with image sizes, window dimensions, and gutter width while maintaining consistent height for both images and proportional width, you can check out my quick jQuery solution here: http://jsfiddle.net/d2gSK/2/

The JavaScript code is as follows:

    // Encapsulate in a function for easy reuse
    function fitImages(img1, img2, gutter) {
        var $img1 = $(img1);
        var $img2 = $(img2);
        
        var ratio1 = $img1.width() / $img1.height();
        var ratio2 = $img2.width() / $img2.height();
        
        var targetWidth = $img1.parent().width() - gutter;

        var width1 = targetWidth / (ratio1+ratio2) * ratio1;
        var width2 = targetWidth / (ratio1+ratio2) * ratio2;

        $img1.width(width1);
        $img1.height(width1 / ratio1);
        $img2.width(width2);
        $img2.height(width2 / ratio2);

        $img1.css('paddingRight', gutter + 'px');

    }

    $(document).ready(function() {
        var $wrapper = $('.portrait-wrapper');
        fitImages($wrapper.children().get(0), $wrapper.children().get(1), 20);

        $(window).resize(function() {
            fitImages($wrapper.children().get(0), $wrapper.children().get(1), 20);
        });
    });

I have provided detailed explanations within the code itself. Feel free to ask if you need further clarification.

Keep in mind that I placed a wrapper around the images and applied display: block and float:left to them, as these styles are necessary for the functionality to work correctly!

Answer 3

Answer №2

One possible solution is outlined below:

<div class="wrapper">
    <p>Lorem Ipsum</p>
    <img src="landscape.jpg" alt="test"/>
    <p> More Lorem Ipsum</p>
    <div class="portraits">
        <img style="float:left;" class="portrait" src="portrait1.jpg" alt="test"/>
        <img style="float:right;" class="portrait" src="portrait2.jpg" alt="test"/>
    </div>
</div>

Answer 4

One possible solution is outlined below:

<div class="wrapper">
    <p>Lorem Ipsum</p>
    <img src="landscape.jpg" alt="test"/>
    <p> More Lorem Ipsum</p>
    <div class="portraits">
        <img style="float:left;" class="portrait" src="portrait1.jpg" alt="test"/>
        <img style="float:right;" class="portrait" src="portrait2.jpg" alt="test"/>
    </div>
</div>

Answer 5

Answer №3

To break them out of the "normal flow", consider adding Float or even using position absolute, especially if the text between the top image and them remains consistent.

As for width, you can set their widths in percentage using pseudo classes - for example, give the first one 80% and the second 20%.

Another option is to create different CSS styles with specific page width breakpoints, like this:

@media screen and (max-width: 400px) {
   .portrait:first {
       width: 85px;
   }

   .portrait:last {
       width: 105px;
   }
}

Repeat this process for each window size step as needed.

I hope this explanation helps!

Answer 6

To break them out of the "normal flow", consider adding Float or even using position absolute, especially if the text between the top image and them remains consistent.

As for width, you can set their widths in percentage using pseudo classes - for example, give the first one 80% and the second 20%.

Another option is to create different CSS styles with specific page width breakpoints, like this:

@media screen and (max-width: 400px) {
   .portrait:first {
       width: 85px;
   }

   .portrait:last {
       width: 105px;
   }
}

Repeat this process for each window size step as needed.

I hope this explanation helps!

How can CSS and JavaScript be used to strategically position two upright images next to each other within a dynamically resizing container?

Answer №1

Answer №2

Answer №3

Similar questions

What is the location where Three.js establishes the default shaders for materials?

Having trouble grasping the problem with the connection

What rules should be followed in Python when it comes to using nested parentheses in functions?

What are the steps to perform typecasting in nodejs?

Spin a sphere by clicking on a link using three.js

Tips on creating a unique d3js tree design

How to display a variety of JSON data in different templates with unique variables using angularjs

Is it possible to replace the catch function in JavaScript with a custom function?

How can we display the Recent Updates from our LinkedIn profile on our website using iframe or javascript?

What is the best method for inserting the HTML content from a specific div into a textarea?

What could be the reason for the malfunction of my for loop within my JSON operation?

Is it possible to delay the loading of a page using location.href?

Using the prop callback in a React test renderer does not trigger updates in hooks

The IE condition is failing to work properly with .js and .css files

Tips on resolving the distinct key issue in React and eliminating it

Tips on personalizing the default html template in nuxt

Multiple columns contained within a span

Date Boxes in a Tangled Web

Enable the input field once the checkbox has been marked

Utilizing IndexedDB for data storage