Maintain the aspect ratio of an element within a flex container

While there are numerous discussions on aspect ratio, I haven't come across a solution that fits my specific issue.

My dilemma is this:

I am looking to create a div with a perfect square aspect ratio within a flex parent set at 100% height.

Below is the current structure of my HTML:

<article class="article">
     <header class="article-header">
          <div class="article-header__user">
               <div class="article-header__user-color"></div>
               <p class="article-header__user-name">Damiano Mondaini</p>
          </div>
          <div class="article-header__more">
               <a href="#" class="article-header__more-share-link">
                    <i class="article-header__more-share-icon">S</i>
               </a>
          </div>
     </header>
</article>

This is the current CSS being used:

.article {
    border-radius: 15px;
    border: 1px solid #134B5F;
}

.article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.article-header__user {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.article-header__user-color {
    background: red;
}

Please take note of the following:

  • <div class="article-header__user">
    serves as the flex parent
  • <div class="article-header__user-color">
    should be styled as a square
  • Avoiding the use of JavaScript is preferred

Appreciate your assistance in advance!

htmlcssflexboxaspect-ratio

Answer №1

give this a try

HTML

<section class="article"> 
     <header class="article-header">
          <div class="user-profile">
               <div class="profile-color">
               <p class="profile-name">Damiano Mondaini</p>
          </div>
          <div class="more-options">
               <a href="#" class="share-link">
                    <i class="share-icon">S</i>
               </a>
          </div>
          </div>
     </header>
</section>

CSS

.article {
    border-radius: 15px;
    border: 1px solid #134B5F;
}

.article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.user-profile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.profile-color {
    background: red;
}

Answer №2

Your code was missing the width and height attributes on the 

<div class="article-header__user-color">
. Here is the corrected code:

.article {
    border-radius: 15px;
    border: 1px solid #134B5F;
}

.article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.article-header__user {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.article-header__user-color {
    background: red;
    width: 15px;
    height: 15px;
}
<article class="article">
     <header class="article-header">
          <div class="article-header__user">
               <div class="article-header__user-color"></div>
               <p class="article-header__user-name">Damiano Mondaini</p>
          </div>
          <div class="article-header__more">
               <a href="#" class="article-header__more-share-link">
                    <i class="article-header__more-share-icon">S</i>
               </a>
          </div>
     </header>
</article>

Answer №3

I was facing an issue because the article and its elements did not have a set height. I decided to manually assign a fixed height to the header of my article and it solved the problem. Appreciate the help from everyone involved.

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

Tooltip Bootstrap timing

I am currently working on creating a navigation bar with icon-only buttons that display tooltips when touched or tapped. Here is the code I have implemented: $('a[rel="tooltip"]').tooltip({ animated: 'fade', placement: ' ...

javascriptjqueryhtmlcsstwitter-bootstrap

Steps for transferring an `<li>` element from one `<ul>` to another

<ul id="List"> <li class="li">1</li> <li class="li">2</li> </ul> <ul id="List2"></ul> const items = document.querySelectorAll(".li"); for(var i = 0; i < ...

javascripthtmljquery

Issue with Angular9-MatDatePicker: Unable to establish a connection with 'ngModel' as it is not recognized as a valid attribute of 'input'

Despite my efforts to implement ngmodel binding with matdatepicker, I am still encountering issues, even after reviewing multiple other posts on the topic. Here is a snippet of my HTML: <mat-form-field> <mat-label>Start Date</mat-label ...

htmlangulartypescriptangular-material

The final column appearing as green within the Bootstrap CSS

Seeking to highlight the final column of a table in green. I am working with a table that utilizes Bootstrap styles (it's ASP.Net) and I am looking to make the last column green. While the full table is longer, I am specifically referring to 'Gr ...

cssasp.netbootstrap-4

Ways to customize the selected item's color in md-select using Angular Material?

Currently, I am utilizing the dark theme in angular-material 1.0.4. The appearance of the select element is different when an item is selected: https://i.sstatic.net/FRU0r.png Comparatively, this is how it appears with the default theme applied: https:/ ...

cssangularjsmaterial-designangular-material

Implementing a JavaScript/CSS popup element within a PHP document

I recently attempted to add a popup div to my front page by following instructions from this guide Given that I am not well-versed in coding, I found it challenging to implement the code into my PHP file (which is for a WordPress site). Uncertain about wh ...

javascriptphphtmlcsspopup

Pick Control - Utilize jQuery to display options that haven't been chosen before

Seeking assistance with a table view that includes a button for dynamically adding new rows. Each row contains a select control. Using Select2 for styling purposes. How can I ensure that when adding a new row, the select options only display those not prev ...

javascriptjqueryhtml

Issues with divs not aligning properly

Having trouble centering the results of freeCodeCamp's Twitch.TV project? Even though you've tried using margin: auto and class='text-center', the section containing the results remains left-aligned. How can you ensure that the results ...

jqueryhtmlcss

The function history.popstate seems to be malfunctioning, as it is triggered by both the forward and backward navigation buttons in

When I press the back button, I am attempting to retrieve the previous state. Upon inspecting, I noticed that the popstate function is also triggered by the forward button. However, it does not revert to the previous state even though the popstate function ...

javascripthtmlangularjshtml5-historyweb-frontend

Adding to the beginning of a list in JQuery mobile

Having trouble figuring out how to prepend my list in jQuery mobile while keeping the divider on top of the most recent item added. I attempted to prepend the newly added item, but it ended up shifting the divider to the bottom instead. function loadScan ...

javascriptjqueryhtmljquery-mobile

Ways to automatically display the Nebular Accordion using NgFor

Struggling with the latest Nebular version in Angular 7, I'm encountering a problem when using the nebular accordion component. Problem: The default behavior should have only one accordion expanded at a time, but setting expanded = true expands all of ...

angularhtmlangular7nebular

What is the best way to present a Python list in individual lines on an HTML webpage?

This might be a simple question, and I apologize if I haven't explained it clearly. This is my first time working with HTML, and I'm using a given program that I don't fully comprehend. In the python program, app.py, I read a list of string ...

pythonhtmlflask

Tips for smoothly transitioning between two division elements:

I currently have two different div elements on my webpage: <div id="#content1"> <div id="divWelcome" style="margin-top:50px;"> <div id="headerimg" style="position: relative;"> <div style="position: absolute; bo ...

jqueryhtmlcss

Overflow Issue in Horizontal Navigation Bar of Bootstrap 4

Can someone help me set up a horizontal navbar that scrolls inside the page similar to Uber Eats? I've created the navbar and set the spyscroll, but I'm struggling with making it responsive. How can I hide categories from the navbar when there&ap ...

cssbootstrap-4

Stylish News Carousel using CSS and HTML

I've been working on creating a news slider for my website, but I'm encountering an issue. Despite completing the HTML and CSS, I'm struggling to make the 'showcase' rotate using JQuery. I've tried various guides and instructi ...

jqueryhtmlcss

Arrange and pile up 3 columns using Bootstrap 4

My project currently has a structure using bootstrap columns, as shown in the image below: https://i.sstatic.net/JufaU.png However, I need to change to a lower resolution and rearrange the columns like this: https://i.sstatic.net/IB9sY.png I came acr ...

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4

Can one attach an HTML element to the bottom of another?

I have a question regarding formatting textual documents in HTML. I'm trying to find a way to display multiple pages within a single HTML document, specifically focusing on keeping the footer at the bottom of each page. My goal is to keep it simple, p ...

htmlcss

Techniques for determining if a file is empty using jQuery

Just starting out with JS. I want to validate the file input element before form submission using jQuery/JavaScript. I've researched various solutions, but nothing seems to be working for me. I'm trying to avoid displaying "/c/fakepath" as the ...

javascriptjqueryhtml

Concatenate a variable to the conclusion of a string using PHP

Currently, I am trying to include the id of the logged-in user in a table name. For instance, I would like to have a table named Rating_User_1 where 1 corresponds to the id of the user who is currently logged in. I have stored the user's id in a varia ...

phphtmllaravel

What is the mechanism behind the functioning of "3D Meninas" (CSS/Animation)?

Recently stumbled upon a fascinating website called "3D Meninas", showcasing an impressive 3D animation effect. Upon examining the HTML code, I noticed there was no mention of any <script> tags or events, leading me to believe that it operates solely ...

htmlcssanimation3d