What is the best way to create a CSS card that evenly splits space for both content and image?

Struggling to create a responsive card with an image at the top 50% and text/content area at the bottom 50%. No matter what CSS properties I try, nothing seems to solve the issue.

.container{
    border: 1px solid black;
    border-radius: 10px;
    font-family: sans-serif;
    position: relative;
}

.container .image{
    object-fit: cover;
    height: 50%;
}

img{ 
    height: auto;
    max-width: 100%;
    border-radius: 10px 10px 0 0;
}

.container .content{
    padding: 0.5rem 1rem;
    height: auto;
    width: auto;
}

h3{color: #494949;}
p{color: #8F8F8F}
<div class='container'>
  <div class='image'>
  <img src="https://media.istockphoto.com/photos/beautiful-nature-norway-aerial-photography-picture-id840781672?s=612x612" alt="" />
  </div>
  <div class="content">
      <h3>Lorem, ipsum dolor</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, quidem?</p>
  </div>
</div>

Managed to place the text/content area above successfully, but struggling with moving the image without compromising its fit within the container.

htmlcss

Answer №1

Utilizing CSS grid is a great way to achieve this effect. Simply resize the screen to see how the image adjusts its height based on the content:

.container {
  border: 1px solid black;
  border-radius: 10px;
  display: inline-grid; /* or grid based on your need */
  grid-auto-rows: 1fr; /* equal height row */
  overflow: auto;
}

img {
  height: 0; /* let the text define the height (remove this if you want the iamge to define the size) */
  min-height: 100%; /* get 100% height defined by the text */
  width: 100%; /* cover all the container width */
  object-fit: cover;
}

.container .content {
  padding: 0.5rem 1rem;
}

h3 {
  color: #494949;
}

p {
  color: #8F8F8F
}
<div class='container'>
  <div class='image'>
    <img src="https://media.istockphoto.com/photos/beautiful-nature-norway-aerial-photography-picture-id840781672?s=612x612" alt="" />
  </div>
  <div class="content">
    <h3>Lorem, ipsum dolor</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, quidem?</p>
  </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

What is the best way to position a button under an h3 heading using the display flex

Inside my div, I have an h3 and a button. The div uses display:flex; with justify-content:center; and align-items:center;. However, the button ends up sticking to the right side of the h3. I attempted placing the button in its own div, but this caused a la ...

htmlcss

Uploading CSV files in Angular 4

I am currently working on an Angular4 project where I have implemented a feature that converts data into a CSV file with a header. Now, I am looking to reverse this process and allow users to upload a CSV file instead. To test this functionality, I create ...

htmljsonangularcsvtypescript

Having trouble getting your AngularJS code to work?

Recently, I decided to experiment with AngularJS and started working on a new project. Below is the HTML code I wrote: <div ng-app ng-controller="nameController"> <input type="text" value="Jack" ng-model="fname" /> <input type="tex ...

javascripthtmlangularjs

Changing the width of an SVG path from 0 to 100% using CSS

I have an SVG design of wires that I want to animate the width from "0 to 100%", but I'm having trouble achieving this effect. It's easy to do with a div element, but not with an SVG image. Below is my code snippet: svg path { animation: f ...

htmlcssanimationsvgcss-animations

I am having trouble setting the z-index for the navigation component in Tailwind CSS and Next.js

Currently, I am immersed in a Next.js project that utilizes Tailwind.css. Within this project, there is a header component known as nav, styled as follows: <div className="sticky top-0 z-100 body bg-white flex flex-row items-center">Nav con ...

cssreactjsnext.jstailwind-cssz-index

IE throws an exception when attempting to use Canvas as it is not supported

One of my challenges involves working with a Canvas Element: <canvas id="canvas" width="300" height="300"> Sorry, your browser does not support the Canvas element </canvas> In my JavaScript file, I have the following code: var ct= docum ...

javascripthtmlinternet-explorerhtml5-canvas

What has caused the space between these articles?

I have created a section containing three articles and I am confused about the margin/padding between the articles: This is my HTML code: <section id="home"> <article> <h1>Overview</h1> </article> <article> <h1& ...

htmlcss

Utilizing Jquery to Add Elements and Adjust Element Height

Encountering an unusual issue where the height of a div is not updating when content is appended to it using JQuery. To demonstrate the problem, I have created a simple JSFiddle: http://jsfiddle.net/hf66v/5/ Here is the initial HTML structure: <div i ...

jqueryhtmlcss

The Php Include function is known to create unnecessary whitespace and disregard any specified styles

On one of my web pages, I am using the include() function to bring in content from another page. This external page contains both HTML and PHP code, with echoes for output. Here's an example: The page Apple.php looks like this: <html> <head ...

phphtml

The challenge of removing an event listener

There are three Div elements with a box appearance. When the user clicks on any div, a copy of that div will be added to the end. The original clicked div will no longer be clickable, but the new div will be. This process can repeat indefinitely. I attemp ...

javascripthtmlcss

Is it a wise choice to implement frames in AngularJS?

I am in the process of developing an AngularJS application with a three-panel main view, resembling a mail system with a navigation bar on the left. The right pane is divided into two sections; selecting an item from the navigation bar populates the top-ri ...

javascripthtmlangularjsiframe

Is it possible to retrieve real-time data from a database using AJAX technology?

The information I am retrieving is stored in a specific database. By using an arduino-box, the data is transmitted. The data is then presented using the following CSS & HTML code: <div class="event"> <img src="http://dummyimage. ...

phpmysqlhtmlajaxjquery

Tips for refreshing the page without losing the values of variables

In my simulation.jsp file, I have the following code that retrieves simulation data from a struts2 action: $(document).ready(function() { var data='<s:property escape="false" value="simInfos" />'; } Once I perform the simulation with this ...

javascriptjqueryhtmljspstruts2

various types of font colors within the text box

If I have a text box with the content "eg. 'one'" Can I set the font color of "eg." to color:black and "'one'" to color:red? Below is the HTML code: <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true" Text="eg.-one"> ...

c#htmlasp.netcss

When the direction is set to rtl, special characters that are supposed to be at the

When using the direction property for a label with windows style directory paths containing backslashes, I encountered an issue. The purpose of using direction:rtl; was to display the end part (file names) of the path. However, I found that I am getting th ...

csshtml

Enhancing the mobile menu with a feature that allows users to easily close the

I am currently designing a mobile menu for a website that I created using Wordpress with the Divi Theme. When the user clicks on a "hamburger icon", it triggers a fullscreen menu to open: mobile menu If you tap on "Termine", it will reveal a submenu: mo ...

javascriptcsswordpressmobilemenu

CSS selector for detecting elements with empty or whitespace-only content

A special selector called :empty allows us to target elements that are entirely devoid of content: <p></p> However, in some cases, the element may appear empty due to line breaks or white spaces: <p> </p> In Firefox, a workar ...

htmlcsscss-selectors

JQuery automatically selects an action upon 'change' event, but does not do so upon 'select' event

I'm hoping my explanation was clear. I have a text input field that utilizes the jQuery UI autoselect function. When a user selects an option, the input field auto-fills correctly. However, I encounter an issue when a user types something but does not ...

javascriptjqueryhtmljquery-uijquery-ui-autocomplete

How to use jQuery to recursively assign numbered classes to groups of div elements

I am dynamically grouping a fixed number of divs from an array (e.g. 4 in each group). The total number of .item divs retrieved from the array is uncertain... I need to recursively assign the same class to these groups of wrapped divs: <div class="wrap ...

jqueryhtmlclassaddition

Ways to activate an event with select2

Hey there! I have a unique setup on my selling item page with select tags. The first select tag is created using HTML, while the others are dynamically added using jQuery when the user clicks on an "Add More" button. <select id='code0' onclic ...

javascriptjqueryhtmljquery-select2-4