Struggling to squeeze an image into a flex container using CSS

I'm trying to achieve a fluid layout on my page by splitting it in specific ratios.

<div class="container">
  <div class="top">Top</div>
  <div class="image">image</div>
  <div class="footer">footer</div>
</div>

.container{
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.top {
  flex: 25%;
  width: 100%;
  background-color: red;
}

.image {
  flex: 50%;
  width: 100%;
  background-color: green;
}

.footer{
  flex: 25%;
  width: 100%;
  background-color:blue;
}

Visit the demo here

However, I'm facing an issue with inserting an image in the specified ratio as mentioned above. The image is getting stretched instead of fitting properly:

.container{
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.top {
  flex: 25%;
  width: 100%;
  background-color: red;
}

.image {
  flex: 50%;
  width: 100%;
  background-color: green;
  max-width: 100%;
  object-fit: contain;
  
}

.footer{
  flex: 25%;
  width: 100%;
  background-color: blue;
}

Here's the updated demo link for reference

If anyone could provide assistance on this issue, it would be greatly appreciated.

htmlcssflexbox

Answer №1

Implement the following modifications:

.image {
  height: 50%;
  width: 100%;
  background-color: green;
}
img{
  height: 100%;
  width: 100%;
}


.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

.top {
  flex: 25%;
  width: 100%;
  background-color: red;
}

img {
  height: 100%;
  width: 100%;
}

.image {
  width: 100%;
  background-color: green;
  height: 50%;
}

.footer {
  flex: 25%;
  width: 100%;
  background-color: blue;
}
<div class="container">
  <div class="top">Top</div>
  <div class="image"><img src="https://static1.momsimage.com/wordpress/wp-content/uploads/2019/08/Kids-cartoons.jpg" alt=""></div>
  <div class="footer">footer</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

Getting an array of all visible text on a page using the same locator in Selenium

Within different sections of the webpage, I have utilized the following locator (excerpt from HTML): <table id="userPlaylistTable" cellspacing="0" cellpadding="0"> <p class="title"> ABC </p> <p class="title"> DEF </p> ...

cssseleniumselenium-rc

I can't figure out why my code isn't functioning properly. My goal is to have a PDF file generated when the submit button is clicked on a form, and for a

Hello everyone, I am new to the world of programming, but I have been assigned a project that involves using jQuery, JavaScript, html2pdf, and Bootstrap 5. I seem to be facing some issues with my code. Can someone please help me identify what's wron ...

javascripthtmljquerybootstrap-5wkhtmltopdf

How come my responsive design functions properly when I test it using the mobile device tool, but fails to work when I manually decrease the browser size?

While testing my responsive design, I've noticed that using the toggle device tool in the Inspect tools of my browser produces the expected results. However, when I simply resize the browser window manually, the design does not respond as it should. C ...

javascripthtmlcssresponsive-design

Tips for optimizing your webpage for mobile responsiveness

Having an issue with my webpage responsiveness on a Moto G4 device. The web development text is aligned to the right, but I want it centered. How can I achieve this for Moto G4 view? index.html This is where my full code is located: index.html <!DOC ...

htmlcssbootstrap-4

Setting an image or color at specific map coordinates in HTML - a step-by-step guide!

Is it possible to implement colors within the coordinates of a map instead of using transparent clickable spaces? Specifically, when clicking on a circle, the color should transition, for example, from red to blue. Although I attempted using background-co ...

javascripthtml

Using Javascript to convert HTML tables (with CSS) into PDFs

I have a report presented in the form of an HTML table that is quite large, causing the browser to create a scroll in the x-axis. It becomes necessary for me to scroll or zoom-out in order to view the entire table. My goal is to utilize Javascript to conve ...

javascripthtmlcsspdfhtml-table

Prevent pinch zoom in webkit (or electron)

Is there a way to prevent pinch zoom in an electron app? I've tried different methods, such as using event.preventDefault() on touchmove/mousemove events in JavaScript, adding meta viewport tags in HTML, adjusting -webkit-text-size-adjust in CSS, and ...

javascripthtmlcsswebkitelectron

Avoid having any spaces between HTML tags when being displayed from a single <?php?> in PHP

I am intrigued by an issue I am facing and would like to understand why it is happening. Currently, I am working with the Yii2 framework and have created a widget to display a thumbnail using Twitter Bootstrap. I have written the code to allow for the ren ...

phphtmltwitter-bootstrapecho

Flex Display with Bootstrap for Responsive Tables

Is there a way to display the scrolling of a Bootstrap table using a flex container? https://getbootstrap.com/docs/4.4/content/tables/#responsive-tables I am looking for the JSFiddle example with DIV elements. Removing the display:flex from .flex_containe ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

The droplist functionality in jQuery does not seem to be functioning properly within an ASP.NET MVC 5

After adding an external theme to my project and writing a script for listing data in a dropdown list on a separate page, I encountered an issue where the script works on other pages but not on the Layout theme page. HomeController Note: The partial view ...

htmljqueryasp.net-mvc

Activate the fadetoggle function to smoothly transition and fade in

Is there a way to implement jQuery fading in when an element becomes visible? Check out this code snippet for reference: http://jsfiddle.net/IntelandBacon/nWscz/ $('.expand').click(function () { $(this).next().css("visibility", "visible"); ...

javascriptjqueryhtmlcss

Troubleshooting resizing images in React using Material UI's useStyles

When attempting to resize an image using React, I am encountering a problem where adjusting the height and width of the tag with useStyles does not reduce the size of the image but instead moves it around on the page. Here is the code snippet: import { ma ...

javascriptcssreactjsmaterial-uiresize

Switching image sources depending on CSS prefers-color-scheme: A guide

In my endeavor to incorporate the latest CSS prefers-color-scheme media query into my website, I encountered a challenge. I have an img (image) element featuring a very dark blue image, which clashes poorly with the new dark mode setting. Is there a simpl ...

htmlcss

Replace the styles generated by an advertising javascript with custom CSS

I am facing a challenge with a piece of JavaScript code that loads advertising content: <script type="text/javascript" language="javascript" charset="utf-8" src="http://adspaces/103872.js"></script> When rendered in my browser, the code looks ...

javascriptcss

What is the best way to align the plain text to the exact same level as the text inside a text box in Internet Explorer

I am trying to get the text 'Start new Search' to align at the same height as the text in the input box. This issue is only occurring in IE7. Below you can find the image, HTML, and CSS related to this problem: <span class="search_new_search_ ...

cssinternet-explorer

BOOTSTRAP: changing the layout of panels in various sizes for mobile devices

I'm struggling with how to reorganize my panels on mobile devices. Each panel has a different size. Please refer to the attached screenshot for the page layout on large screens (col-lg): https://i.sstatic.net/xcqaT.png EDIT: The layout on large scre ...

javascriptjqueryhtmlcsstwitter-bootstrap

How to obtain the full path of a file downloaded using a Chrome extension

Currently in the process of creating a chrome extension that has the functionality to download specific files from various webpages. For this purpose, I have designed a popup.html where users can input the desired name for the file to be downloaded. Additi ...

javascripthtmlgoogle-chromegoogle-chrome-extensiondownload

How come the Hover effect is activated even without hovering the mouse over the text?

I have designed a dropdown menu, but I am facing an issue with the portfolio section. When I hover over the portfolio, the dropdown menu appears correctly. However, when I hover over the text of the first dropdown menu, all sub-dropdown menus from other dr ...

htmlcssmenuhoverdropdown

Use the 'url' parameter to pass into the ajax function when using jQuery for online requests

I am working with an ajax code that retrieves data from an XML file locally. <script> function myFunction() { $("#dvContent").append("<ul></ul>"); $.ajax({ type: "GET", url: "test.xml", ...

javascriptjqueryhtmljsonxml

How can I dynamically adjust the size of an image in a directory based on its filename with php?

Is it possible to resize a specific image in a folder by its name using PHP? ..................................................................................................................................................................... I have trie ...

phpcssimage