How to perfectly center an element with a specified aspect ratio

I am experiencing a strange problem when attempting to center an element with aspect-ratio applied. I thought it would work similar to centering an image, but I keep getting stuck with an element of 0px x 0px.

https://codepen.io/richardcool/pen/xxeKOwp

I have set up a simple CodePen demo to illustrate the issue. When I remove the align-items: center line, the element turns into 0px x 0px. I have also experimented with centering using absolute positions, but encountered the same problem.

Any suggestions or thoughts on how to solve this?

htmlcssaspect-ratio

Answer №1

To ensure proper alignment and sizing with the aspect-ratio property, it is essential to define explicit dimensions for your div element. Without specific width or height values, the layout may not render as intended. Consider the following scenario:

<div class="gallery">
  <div class="thumbnail"></div>
</div>

.gallery {
  width: 50vw;
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
}
.thumbnail {
    aspect-ratio: 4 / 3;
    background-color: green;
    max-height: 70%;
    max-width: 70%;
    height: 70%;
}

Answer №2

When using alignment properties like flex with aspect ratio, it's crucial to define an actual width or height on the element. Without a base value for CSS to calculate from, even specifying max-width won't work properly.

To ensure proper alignment and centering, set the width of the poster div to 100%. Any max-width settings will take precedence, allowing you to vertically center it using align-items: center on the parent element.

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

Implementing a delay using setTimeOut function to execute an action upon user input

Take a look at this code snippet: $("#test").on("keyup", (e) => { if(e.target.value.length === 3) { setTimeout(() => { console.log("fired") }, 2000) } }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.m ...

javascriptjqueryhtml

Embed video with a custom thumbnail in an iframe

Hello everyone! I'm a first-time user on stackoverflow seeking some help. Currently, I am using Dreamweaver to work with HTML and CSS in order to build a website. My task involves sourcing a video from a television archive and embedding it onto my si ...

htmlcssiframedreamweaver

"Encountering a Javascript issue while trying to apply a CSS class to a

Encountering issues in Safari desktop / mobile and Internet Explorer. The error message states: In Safari: TypeError: Attempted to assign to readonly property. IE Edge: Assignment to read-only properties is not allowed in strict mode The problem arises ...

javascripthtmlvue.js

Mobile display issue with Foundation 4 topbar navigation

I am experiencing an issue with Foundation 4 not rendering correctly on a small screen. When running on a local server, my custom CSS and JS are disabled, even though all the necessary libraries including the Foundation library are properly loaded: Why is ...

htmlzurb-foundation

Animated CSS Checkmark Design

How can I create an animated Check-mark using CSS with SVG animation? I attempted the following code but it doesn't seem to be working. Any suggestions? DEMO: https://jsfiddle.net/b7Ln0jns/ CSS: @import "bourbon"; $color--green: #7ac142; $curve: c ...

javascriptjqueryhtmlcss

Image link in HTML / CSS not functional on one half of the image

My webpage has an image thumbnail with accompanying text positioned to the right. I have a hyperlink on the image that should open the full-size version when clicked. However, there seems to be an issue where the hyper link only activates on the lower hal ...

htmlcss

Design element: Text overlaying background with a touch of transparency

Is there a way to create a background image with an opacity level of 0.5, while maintaining the text on top at full opacity (1) for better readability? Currently, the background image is not displaying as desired, and the opacity settings are affecting the ...

cssreactjsmaterial-ui

I'm struggling to make this background show up in a div

Anyone able to help me figure this out? I can't seem to get the achtergrond_homepage.png as a background in rounded corners. Edit: It seems like the gray color is always on top. Could it be controlled in the JavaScript part? This is the CSS: @ch ...

javascriptcssbackground

How can I access a component variable within the styles in Angular?

Is it possible to utilize a variable width in my Angular 5 component template? I would like to achieve something similar to this: <style> input:checked + .slider:before { transform: translateX({{width}}px); } </style> The &apo ...

cssangular

Generating a dynamic triangle within a div while ensuring it fits perfectly with the maximum width

I need help with creating a responsive triangle on a web page that takes three inputs. The challenge is to adjust the size of the triangle so it fits inside a div element while maintaining the aspect ratio of the inputs. For instance, if the inputs are 500 ...

javascriptjquerycssresponsive-designgeometry

Customize Tab indicator styling in Material-UI

Currently, I am attempting to customize the MUI tab by changing the indicator from a line to a background color. Through my research, I discovered that using TabIndicatorProps and setting a style of display:none eliminates the indicator completely. However ...

javascriptcssreactjsmaterial-uifrontend

The issue with the Material UI Drawer component is that it is casting a shadow even when

Having some trouble with the Material UI Drawer component. Whenever I try to display it on my webpage, it automatically focuses on the inner div, adding a shadow or border if the focus is anywhere else. Does anyone know why this shadow appears and how to r ...

htmlcssreactjsmaterial-uiz-index

"Utilizing jQuery to select elements for the purpose of preventing default

$('input[name=boxes], .item_add a ').on('click', function(e) { e.preventDefault(); //perform common actions } Is it possible to stop the default scrolling behavior when clicking on a link [.item add a], while still allowing the defa ...

jqueryhtml

What is the recommended way to adjust the width of a paper-textarea element in Polymer 1.0?

Is there a way to adjust the width of a paper-textarea? I have tried using CSS selectors within Polymer 1.0 style tags, but it does not seem to be effective. The paper-textarea element is made up of paper-input-container. I attempted the following approach ...

csscss-selectorspolymer-1.0paper-elements

Placing a user's username within an ejs template using express and node.js

Currently, I am attempting to integrate the username into a layout using ejs templating with node and express. Below are the steps I have taken: Mongodb model: const mongoose = require('mongoose') const Schema = mongoose.Schema; var uniqueValid ...

javascripthtmlnode.jsexpressejs

The "read more" button seems to be malfunctioning

I've been working on integrating a gallery of images into my posts. My goal is to display 4 images initially, followed by a "load more" button that, when clicked, will reveal another set of 4 images, and so on. I have already created the HTML, CSS, an ...

javascriptjqueryhtmlcssbutton

CSS might not always work properly on all web browsers, but it functions perfectly on Eclipse

When developing JSF pages with stylesheets, everything seems to be working fine in the Eclipse preview function. However, when I test the pages on IE8, the styles do not seem to have any effect. I am utilizing composite views to define a general layout fo ...

cssjsffacelets

Displaying videos in full screen using HTML5

I am attempting to create a fullscreen webpage with a video using the following code: <video id="backgroundvideo" autoplay controls> <source src="{% path video, 'reference' %}" type="video/mp4"> </video> ...

htmlcsshtml5-video

dropdown menu items with jQuery toggle feature

Having an issue with a jQuery dropdown menu. Below is the code: $('.item-active, .item').click(function() { $(this).toggleClass('item-active'); if($('h3').hasClass('item-active')) { $(this).siblings ...

jqueryhtml

Having trouble with Vuejs Ternary Operator or Conditional in v-bind-style?

Having some unexpected issues while trying to implement a style conditional for items in Vuejs. I have come across Stack Overflow posts on how to use a ternary, either through an interpolated string or a computed style object. I've attempted both met ...

javascriptcssvue.jsconditional-statementsternary-operator