I have a square block measuring 100*100px. The container block it is within can be resized. I need the inner block to adjust its size dynamically so that it always fits inside the parent container without overflow and maintains its square shape.
Important: It's crucial to keep the inner div as a square.
#child {
height: 100px;
width: 100px;
background-color: red;
}
#par {
height: 200px;
width: 200px;
border: 2px solid black;
}<div id="par">
<div id="child">
</div>
</div>To create a square element with a ratio of 1:1, simply apply the CSS property padding-bottom: 100%. If you want content within this square, the inner content must be positioned absolutely.
body { width: 200px; }
.square {
padding-bottom: 100%; /* 1:1 aspect ratio (square) */
border:1px solid red;
position: relative;
}<div class="square"></div>You can place the square inside a container or parent element, but how should overflowing behave?
.parent {
height: 200px;
width: 80%;
border: 1px dashed black;
}
.square {
padding-bottom: 100%; /* 1:1 aspect ratio (square) */
border:1px solid red;
position: relative;
}
.square .inner {
position: absolute;
top: 0; left: 0;
width: 100%;
overflow: auto;
}<div class="parent">
<div class="child square">
<div class="inner">responsive square 1:1</div>
</div>
</div>https://i.sstatic.net/EYBSz.gif
Example on jsFiddle: https://jsfiddle.net/azizn/mheoqbnw/
If you're looking for it, here's the link to check out: The future of element-queries is here!
To ensure the #child element maintains its proportions, set both the max-height and max-width to 100% in addition to the specified height and width:
#child{
height:120px;
max-height:100%;
width:120px;
max-width:100%;
}
Give this a go
#box{
width: 150px;
height: 150px;
border:1px solid black;
overflow: hidden;
}
#box #inside{
position: relative;
width: 50%;
height: 50%;
margin: auto;
margin-top: 25%;
background-color:blue;
}
When you provide the child element with a minimum, maximum, and height of 100%, it will automatically adjust its size to match that of its parent element.
Check out the solution below:
.child
{
height:100px;
width:100px;
background-color:red;
}
.par
{
position: relative;
height:200px;
width:200px;
border:2px solid black;
}
.par:before {
content: "";
display: block;
padding-top: 100%; /* maintain aspect ratio of 1:1 */
}
.par > .child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}<html>
<body>
<div class="par">
<div class="child">
</div>
</div>
</body>
</html>If this resolves your issue, please mark it as solved.
I love using EQCSS, a unique tool that allows me to extract data from JavaScript and incorporate it into my CSS styling. Take a look at this example featuring a column that is 33% wide with a resizable square inside:
<section>
<div></div>
</section>
<style>
section {width: 33%;}
@element 'div' {
$this {
width: auto;
height: eval("clientWidth")px;
background: red;
}
}
</style>
<script src=http://elementqueries.com/EQCSS.js></script>
The use of width: auto ensures the square fills its container. The eval('clientWidth') statement within the element query specifically refers to the width of the element itself, resulting in a square shape where the height matches the width.
Explore more at:
I apply a similar approach to dynamically adjust the size of Youtube and Vimeo iframes based on their aspect ratio without requiring additional wrapping elements:
@element 'iframe' {
$this {
margin: 0 auto;
width: 100%;
height: eval("scrollWidth/(width/height)")px;
}
}
Witness responsive video scaling in action:
This method has been incredibly useful for me, and I hope you find it valuable too!
body { width: 200px; }
.square {
border: 1px solid red;
aspect-ratio: 1 / 1;
width: 100px; /* <-- optional, this is only for the demo */
}
.not-a-square {
border: 1px solid green;
aspect-ratio: 2 / 1;
width: 100px; /* <-- optional, this is only for the demo */
}<div class="square"></div>
<div class="not-a-square"></div>Learn more at: https://caniuse.com/mdn-html_elements_img_aspect_ratio_computed_from_attributes
I am in the process of developing a form that enables users to modify the information on the form, with the initial values of the form appearing as defaults. Despite setting my variable as the value, it does not display. All other default values are visib ...
When I hover over my menu, a box fades in. However, there is a small icon behind this box that I want to move to the front so it can be visible during hover. To see an example of my menu, click here: Navigation I attempted to address this by using jQuer ...
I have used jQuery to create a set of buttons inside a <ul> element. I am now attempting to resize the <ul> by adding a handle to the top of it, but when I try to resize it, the element jumps as shown in the images below. What could be causing ...
I am currently facing an issue with my file submission form and progress bar in JavaScript. The progress bar is interfering with the controller, preventing it from redirecting back home with the link. I have tried removing window.location.href="/"; but thi ...
I am attempting to search for an item by sending a GET request to my service and then populating my table with the response, but I am struggling to achieve this with my current code. $(function(){ var $searchInput = $("#search"); $("#searchOptions").c ...
Is there a way to restrict user input to only numbers with a maximum length of 3 in Material UI? <TextField id="score" label="score" className={classes.textField} name="totalScore" margin="normal" defaultValue={score} /> We specifically ...
I'm currently attempting to pass a background image using a prop, but I'm encountering an issue where it's indicating that url is undefined. const CardImage = styled.div` height: auto; width: 100%; background-size: c ...
In my current project using react and material-ui, I am facing a simple issue that has me stumped. I am trying to create a drawer with a specific height so that it does not overlap the app bar when opened. Unfortunately, there is no built-in parameter in ...
As a new designer, I have a question about how to make the background color extend to the top without any white space. Can someone please guide me on how to achieve this? <!DOCTYPE html> <html> <head> <style> body{ margin: 0px; p ...
I've recently launched a website that allows users to post questions and receive responses from others. Each question is housed in a div, which then contains another div with the CSS property of display: none. Within the main div, there's a butt ...
Currently, I am honing my web scraping abilities by utilizing the World Surf League website. So far, I have not extracted any data; instead, I am focusing on navigating the site using Selenium. However, I have hit a roadblock where I am unable to 'cli ...
I'm totally new to all of this and definitely not an expert, but there's something that really bothers me. I found a website where you have to complete a captcha to log in. It goes like this: <input type="text" class="form-contr ...
When trying to select a radio button, I am facing an issue where they are not appearing on the UI. Although the buttons can be clicked, triggering a function on click, the selected option is not displayed visually. <div data-ng-repeat="flagInfo in avai ...
I have set up my page to display divs containing posts using a specific format. The divs are structured as follows (replacing # with the postID from my database): <div id="post_#> <div id="post_#_inside"> <div id="like_#"> ...
I created a basic HTML/CSS code for testing purposes, but I'm having trouble getting the library to function properly. I've placed the .htc, .php and .js files in the same directory as index.html, but it just won't work. Check out the code ...
<div class="flex-container"> <div class="red hover flex"> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </h1> </div> ...
I've encountered an issue while trying to incorporate a highchart within a flexbox container. The chart expands along with the container without any problems, but it fails to contract when the container size decreases. My current setup involves angul ...
While working on a c#.net windows application, I encountered an issue with setting font color for specific lines in the email body when sending mail to Outlook. Despite trying various methods, I was unable to find a solution. Below is a snippet of my code: ...
Check out this JSFiddle for more information <textarea wrap="off" rows="5" style="border-radius: 4px">aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbbaaaaaaaaaaabbbbbbbbb aa ...
On a single web page, there are 3 different language words displayed: Language / 한국어 / ภาษาไทย I am interested in enlarging the Thai word (ภาษาไทย) to make it stand out. <span class="thai">ภาษาไท ...