Tips and tricks for ensuring images maintain their aspect ratio and height when resizing for responsiveness

I am facing an issue with my two-column layout. One column contains an image and the other column has text and buttons with a fixed height. To ensure the image is responsive, I have set the width to 100% and height to auto. However, upon resizing, the aspect ratio of the image does not match the height of the second column.

On the other hand, if I set the image height to 100%, it aligns well with the height of the second column but compromises the aspect ratio of the image. Any suggestions on how to tackle this dilemma?

PS

It works fine in mobile view with a max-width of 567px. The problem arises in PC view for which I need assistance.

.btn {
    width: 100px;
}
.explain {
    height: 250px;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e3e213e3e2b3c60243d0e7f607f78607f">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body class="bg-light">

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 p-0">
                <img src="https://www.petittrain-quiberon.com/files/tao/img/demo/background-1.jpg" class="w-100" >
            </div>
            <div class="col-md-6 bg-dark text-white p-0">
                <div class="py-5 px-3 explain">Lump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump Lump</div>
                <div class="py-5 px-3">
                    <div class="row m-0">
                        <div class="btn btn-primary col-md-5">Ok</div>
                        <div class="btn btn-secondary col-md-5 offset-md-2">Cancel</div>
                     </div>
                </div>
            </div>
        </div>
    </div>
</body>

htmlcssresponsive-design

Answer №1

Apologies for the inline styles, but rest assured that this should function as intended. My suggestion would be to consider using a background image for this purpose. Make sure to specify a fixed height for the "row" element, and then set the "col" to 100% of its parent's height.

.btn {
    width: 100px;
}
.explain {
    height: 250px;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb9b849b9b8e99c58198abdac5daddc5da">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>
<body class="bg-light">

    <div class="container-fluid">
        <div class="row" style="height: 400px;">
            <div class="col-md-6 p-0" style="height: 100%;">
                <div style="height: 100%; width: auto;background-image: url(https://www.petittrain-quiberon.com/files/tao/img/demo/background-1.jpg);background-size:cover;"> </div>
            </div>
            <div class="col-md-6 bg-dark text-white p-0">
                <div class="py-5 px-3 explain">Lump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump LumpLump Lump</div>
                <div class="py-5 px-3">
                    <div class="row m-0">
                        <div class="btn btn-primary col-md-5">Ok</div>
                        <div class="btn btn-secondary col-md-5 offset-md-2">Cancel</div>
                     </div>
                </div>
            </div>
        </div>
    </div>
</body>

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

Display array elements in a PDF document using pdfmake

Upon reaching the final page of my Angular project, I have an array filled with data retrieved from a database. How can I utilize pdfmake to import this data into a PDF file? My goal is to display a table where the first column shows interv.code and the ...

javascripthtmlangulartypescriptpdfmake

What could be causing the spinner (Bootstrap 5.x) to not show up on the screen

I'm having trouble getting a spinner to show up when a user clicks a form submit button. Below is the HTML code to add a <div> for the spinner: <div class="pageloader"> <img src="../images/loader-large.gif" alt ...

cssjquery-uibootstrap-5

How can I use React to selectively print a section of a webpage?

I need to print only the Bill section of my page when a button is clicked. How can I achieve this without printing the entire page? I tried using window.print() within a function, but it ended up printing the entire page instead. ...

htmlreactjsprinting

What is the correct way to integrate a HTML/CSS/JS theme into a Vue project effectively?

As a newcomer, I recently acquired a bootstrap theme that comes with HTML, CSS, and JavaScript files. My goal now is to integrate this theme into Vue in order to make it fully functional. The challenge I am facing is how to successfully incorporate the the ...

javascripthtmlcssvue.js

What is the best way to position the left sidebar on top of the other components and shift them to the

Currently, I am working on a project to display NBA data fetched from an API. I am aiming to recreate the design showcased here: Dribbble Design My main challenge lies in overlaying the left sidebar onto the main box and shifting the components sligh ...

javascriptcssreactjs

Encountering the "ENOTFOUND error" when trying to install ReactJs via Npm

Struggling to install ReactJs? If you've already installed Nodejs and attempted to create a ReactJs project folder using npx create-react-app my-app, but encountered the following error: npm ERR! code ENOTFOUND npm ERR! syscall getaddrinfo npm ERR! er ...

javascripthtmlnode.jsreactjsnpm

Using JavaScript functions to modify the style of the DOM

Is there a way to change the style of a dom element using JavaScript when only the element id and style value are passed as parameters, without passing the actual style parameter itself? For example, is it possible to use the id "first" and set the color ...

javascripthtmldomstyles

What was the reason for Vue's decision to deprecate the ""is" attribute for HTML elements?

Vue's eslint rules mention that the is attribute on HTML elements is deprecated (since 3), and should be used on components instead: <template> <!-- ✓ GOOD --> <div /> <component is="foo"> <!-- ✗ BAD --&g ...

htmlvue.jsvuejs3

Ensuring consistent placement and scrollability of two divs across all screen sizes

I am in need of a solution to fix the top and bottom divs in the given image. The scroll should only occur when there is overflow. <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> ...

javascriptjqueryhtmlcss

Unlimited header height with automatic vertical overflow for content on the rest of the page

My page has a header with content that can wrap, so it doesn't have a fixed height. I want the rest of the page to be filled by the content container and activate vertical scroll when there is too much content in the container. I've tried various ...

htmlcss

I require assistance in implementing a button for executing this specific HTML code

Can someone assist me in embedding my HTML code into a button so that when the button is clicked, my code executes? function loadProgressBar() { var bar = document.getElementById('progressBar'); var status = document.getElementById(&ap ...

javascripthtmlprogress-bar

(Bootstrap) Implementing inline block properties to ensure consistent column display

I am currently working on improving the column layout of a website. However, I am facing an issue where there are large blank spaces if the text lengths or image sizes vary. To test out the theme, I have included some sample products in the image below. h ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

How to use plain JavaScript to extract the value from a textarea in GWT

Situation: I am currently developing a tampermonkey script to enhance certain GWT pages within a third-party application. Unfortunately, I do not have access to the source code or servers. Challenge: My task is to retrieve the value of a textarea element ...

javascripthtmlgwttampermonkey

Unable to adjust layout when code is functioning alongside background-color

I'm looking to dynamically change the position of an item on my webpage when it is clicked. Is there a way I can achieve this without relying on id names? I currently have a code snippet that successfully changes the background color, but for some rea ...

javascriptjquerycss

Having trouble deleting files in PHP?

I am presenting an HTML form below: <form action='delete.php' method='POST'> <table> <div class = '.table'> <?php $dir = '../uploads/store/'; $new ...

phphtmldelete-file

Unspecified origins of Js in Chrome Extension

console.log(chrome.runtime.sendMessage({from:"script2",message:"hello!"})); However, attempting to send the message from a background script to a content script is proving to be unsuccessful. https://i.stack.imgur.com/ERgJB.png ...

javascripthtmljquerygoogle-chrome

Vertical button group within a Bootstrap 5 input group

How can I create an input-group for increasing or decreasing numbers? Below is the code I have: <div class="input-group input-group-sm"> <input type="text" class="form-control" placeholder="0.9"&g ...

htmlcssbootstrap-5

Prevent Fixed Gridview Header from being affected by browser Scroll-bar using JQuery

Is there a way to make the fixed header responsive to only one scroll bar in JQuery? Specifically, is it possible to have it respond solely to the div's scroll bar and not the browser's scroll bar? I attempted to remove the browser's scroll ...

javascriptjqueryhtmlcssgridview

Python's web scraping with Selenium

I have encountered an issue while trying to extract data from an HTML table. Although I was able to successfully count the rows, the problem arises when I attempt to print the data as it ends up repeating the same row multiple times. Can someone please h ...

pythonhtmlselenium-webdriverweb-scraping

Delete particular user inputs following a $.ajax request

I have created a search feature with inputs that allow users to search the database using ajax requests. Unfortunately, I am facing an issue where the response from the server includes the search inputs themselves. This is not what I want. Here's a ...

javascriptjqueryhtmlajax