Resizing images within a container using Bootstrap to fit the screen dimensions

I am having an issue with my bootstrap page where the tiles adjust position based on screen size. Everything works well except when I try to add images to the tiles along with other content. In the example below, you can see that the first tile has an image displayed below a checkbox and title. However, due to the checkbox and title, the image appears cut off at the bottom of the panel. On the second panel, I only have the image and it resizes perfectly within the panel to fit all screen sizes. I have attempted to use CSS to specify the height of the image, but this solution does not work consistently across all screen sizes. If I set the height to 50%, it fits on large screens but overflows at the bottom on smaller screens. Is there a way to work around this issue? Can I specify the image size in CSS for common screen sizes?

HTML Script

<html>
<head>

    <meta charset="utf-8">
    <title>HomeControl</title>
    <!-- include bootstrap -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="test.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="row">
    <div class="col-sm-2 col-xs-4">
    <div id="tile1" class="tile">
<p style="color:blue">Boiler On/Off</p>
        <!--Boiler on/off control-->
         <div class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="item active">
               <div class="boilerSwitch">
<label class="switch">
<input type="checkbox" name="boiler" id="boiler" value="1">
<div class="slider round"></div>
</label></div>
    <img src="../heatingCold.png"/>
</div>
            </div>
          </div>
        </div>
</div>
<div class="col-sm-2 col-xs-4">
<div id="tile2" class="tile">
     <!--Niamh Room control-->
         <div class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="item active">
<img src="../heatingCold.png" class="img-responsive"/></div>
</div>
          </div>
        </div>
    </div>
</div>
<script type="text/javascript">
$( document ).ready(function() {
    $(".tile").height($("#tile1").width());
    $(".carousel").height($("#tile1").width());
     $(".item").height($("#tile1").width());
     
    $(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 10);
    });
    
    $(window).bind('resizeEnd', function() {
    $(".tile").height($("#tile1").width());
        $(".carousel").height($("#tile1").width());
        $(".item").height($("#tile1").width());
    });

});


</script>
</body>
</html>

https://i.sstatic.net/jTpcW.jpg

Answer №1

Did you intentionally leave out the class="img-responsive" on your second image?

It might be beneficial to check out the Bootstrap Media Queries for responsive design.

/* For extra small devices (phones, less than 768px) */
/* Bootstrap defaults apply here */

/* For small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* For medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* For large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

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

Obtain array buffer from NodeJS to capture frames from a video file

My current goal is to extract frames from a video in node without relying on a video tag. I am utilizing openvg-canvas for this task, which allows me to print images and use the canvas API functionalities successfully. The challenge lies in the fact that ...

What is the best way to adjust a wide HTML table to make it narrow enough to fit perfectly within the screen width?

I need assistance with formatting an HTML table that contains multiple columns: <table id="req_header" border="2" style="overflow: auto;"> <tr> <th><i class="fa fa-solid fa-check"> ...

Looking to enhance the size of pagination icons for previous and next pages on a Material-UI React table?

I am looking to adjust the size of the previous page and next page icons in a material table implemented in React. Below is the code snippet: localization = { { body : {} , toolbar: { searchTooltip: 'Search'} , pagination: ...

Flask Pagination : UnboundLocalError occurs when trying to reference a local variable 'res' before it has been assigned

I'm currently troubleshooting an issue with flask pagination. Whenever I attempt to implement it, I encounter the UnboundLocalError. Even after removing all variables, the pagination feature still fails to function as intended. @app.route('/&apos ...

Having trouble adding animation to button element following the application of :after pseudo-element styling

I've been grappling with pseudo elements, but I just can't seem to make a simple button animation work using them. My goal is to have a panel move from bottom to top on hover. Similar to the button found on this page (1st row, 2nd button). From ...

Automatically generated JavaScript input value calculation

I have 3 text input fields set up as follows: <input type="text" id ="text1"/><br> <input type="text" id ="text2"/><br> <input type="text" readonly="readonly" disabled="disabled" id ="text3"/> The third input is disabled and ...

Utilizing the calc() function to determine height dimensions

I created a very simple layout with 5 divs, which can be viewed here: http://jsfiddle.net/8tSk6/. In this layout, I want the div with the ID "kubka" to have a height of 100% - 100px (height: calc(100% - 100px);). However, I am running into issues as it i ...

Is there a way to include an optional backslash in URLs using the .htaccess file without leading browsers to believe I am navigating to a subfolder?

As I update my php pages with the .htaccess file, I am facing an issue where the pages do not load properly when an optional backslash ("/") is included in the URLs. One possible solution is to use absolute URLs instead of relative ones so that CSS and J ...

Do my Dash tutorials appear drastically different from the documentation? Is this normal?

As an experienced back-end engineer, I am delving into the world of browser-based GUI design for the first time, specifically with HTML, CSS, and more. My current project involves building a dashboard using Dash, and I am in the early stages of familiarizi ...

Can cells within an HTML table be crossed out?

I have a creative idea for an HTML table - I want to be able to cross out cells in a way that looks like the following drawing: At first, I thought about creating a CSS right triangle within the cell. But I got stuck when trying to only color the hypotenu ...

"Exploring the Relationship Between Parent and Child Elements in CSS

Is it possible for an id to act as a parent in CSS? For instance: <div id="link"> <a href="www.example.com"></a> </div> The CSS code: #link > a{ /* style would be applied here*/ } Can this actually be achieved? ...

Eliminate any additional spacing within the pre/code tags

I am currently utilizing prism.js for code highlighting. I have encountered an issue where there are unnecessary white spaces at the top and bottom of my output. You can view a live example here. <pre> <code class="language-css"> &lt ...

Issue with Bootstrap dropdown menu not closing correctly when clicked on mobile devices

On my Bootstrap website, I have a mobile menu that looks like this: <a class="nav-link" href="#" id="shop_submenu" role="button" data-bs-toggle="dropdown" aria-expanded="true" data-bs-auto-close="true"> Rent Costumes ...

Using Jquery to update the information displayed in a div class to show more details about the clicked video

I am currently developing a video playlist similar to YouTube for my hybrid app. I am fetching and displaying the data using functions from json data provided by the web server. Below is a sample of the json data: [{"video_id":"1","video_youtube_title":" ...

Tips for adding images using v-for in Vue 3

Having some trouble creating a set of images using a v-for loop, as it seems to be not recognizing the variables inside the tag. The picture is broken and the alt attribute just shows me {{ item.alt }}. Here is my HTML: <section class="our-technolo ...

A two-column layout utilizing the full height feature in Bootstrap 5, excluding the use of cards within the

I am currently attempting to create a two-column full-height page without using cards. Instead, I want to include a significant amount of text, links, and buttons in both columns. I am uncertain if this is achievable with Bootstrap columns. If anyone knows ...

Webpack doesn't seem to be able to display custom fonts

I have a small project in progress using webpack. One of the tasks I'm facing is loading custom fonts. I followed the official tutorial here, where it explains how to handle assets in webpack configuration. My custom fonts are located within the src ...

PHP Session-Based Language Toggle

I have implemented a simple session switch on my website to make it bilingual. However, there is a flaw - whenever the user switches to the other language, they are redirected back to the index page. I am looking for a solution that allows the user to stay ...

Modify flex direction to column in response to changes in height of another div or when its content wraps

I am currently utilizing React MUI V5 and I am looking to modify the flex direction of a div from row to column when a preceding div changes in height or wraps. Below is a basic example of what I have implemented using plain HTML/CSS, but I am uncertain i ...

Iphone not picking up media queries, while browser resize is working perfectly

Hey there, I'm currently using a theme called Bones on my WordPress site, but I'm encountering some difficulties with the responsive menu on my iPhone. Oddly enough, when I manually resize the window, the menu seems to work just fine. Here' ...