Inner div with square ratio and flexbox
A similar answer to the one provided by Temani Afif, but using an svg instead of an image (so no need to the extra request).
Also, it's easier to adapt it to arbitrary aspect ratios
.container { height: 150px; background-color: lightblue; display: flex; align-items: center; justify-content: center; margin: 10px;}
.aspectRatio { display: grid; background-color: yellow; height: 50%;}.aspectRatio svg { height: 100%; border: solid 1px red; animation: resize 1s infinite;}.aspectRatio > * { grid-area: 1 / 1 / 2 / 2;}
@keyframes resize { from {height: 100%;} to {height: 99.9%;}}<div class="container"> <div class="aspectRatio"> <svg viewBox="0 0 1 1"></svg> <div class="inner">square</div> </div></div><div class="container"> <div class="aspectRatio"> <svg viewBox="0 0 4 3"></svg> <div class="inner">ratio 4/3</div> </div></div>Flexbox, responsive grid of square divs maintaining aspect ratio
To maintain your items aspect ratio, a very simple method is to use CSS Viewport units
I modified your pen to see how this units work: http://codepen.io/vladbicu/pen/wMBmOb
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: auto;
max-width: 960px;
width: 80%;
}
.container__item {
align-content: center;
border: 1px solid #333;
display: flex;
flex-basis: 1;
font-size: 3em;
justify-content: center;
margin-bottom: 1em;
// maintain aspect ratio
width: 30vw;
height: 30vw;
}
Hope it helps.
css grid of squares with flexbox
edit 2022 Nowdays, aspect-ratio becomes widely avalaible. set a width or an height then for a square use the 1/1 ratio : aspect-ratio: 1 / 1 ;
ressources:
- tutorial https://css-tricks.com/almanac/properties/a/aspect-ratio/
- description https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
- browsers that understand it https://caniuse.com/?search=aspect-ratio
snippets becomes (note: no width nor height set, since we are in flex layout and flex-grow is set to 1 flex: 1 0 auto; , doing the sizing job ):
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
justify-content: space-around;
}
.flex-item {
background: tomato;
margin: 5px;
color: white;
font-weight: bold;
font-size: 1.5em;
text-align: center;
flex: 1 0 auto;
aspect-ratio: 1 / 1 ;
}
/* Item can be any kind of box from here . flex/grid/block */
.flex-item {display:grid;align-items:center;justify-content:center;}<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
</body>Empty responsive square with sides equal to sibling's height inside a flexbox
If you just need a square on the right then this can be drawn as a pseudo element:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-size: 22px;
}
.container {
position: relative;
left: 30%;
top: 50px;
width: 40%;
border: 1px solid black;
padding: 8px 24px;
border-radius: 30px;
}
.task {
display: flex;
justify-content: space-between;
border: 1px solid green;
position: relative;
}
.task-info {
border: 1px solid blue;
}
.task-info::after {
content: '';
position: absolute;
top: 0;
right: 0;
border: 1px solid red;
height: 100%;
aspect-ratio: 1;
z-index: -1;
}
.task-button {
border: 1px solid transparent;
}<div class="container">
<div class="task">
<div class="task-info">
Content
</div>
</div>
</div>How to style a div to be a responsive square?
Works on almost all browsers.
You can try giving padding-bottom as a percentage.
<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>
The outer div is making a square and inner div contains the content. This solution worked for me many times.
Here's a jsfiddle
Trying to make a square image wall using CSS flex, but first row doesn't behave as expected
The problem is with the 500x750 image. According to the cover documentation:
The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
You've basically enforced a minimum height using gallery-item:before, but the only dimension that's actually determined is width; if the item has height>width, it will cause the gallery-item to expand. When you put the 500x750 image in any row, you'll see that it expands vertically.
I'd recommend styling the gallery-item to be a square per this answer. Once you have a maximum height enforced, contain should work like you want it to.
Related Topics
Difference Between "Lang" and "Type" Attributes in a Script Tag
Why Is Using Tables for Website Layout Such an Evil
How to Make Rectangular Image Appear Circular with CSS
Button Is an Inline Element But Width Is Working
Page-Break-Inside Doesn't Work in Chrome
How to Control The Width of Select Tag
How to Export Part of an HTML Page to an Svg Image
Can Data-* Attribute Contain HTML Tags
Should I Use The <P /> Tag in Markup
CSS Attribute Selector for Input Type="Button" Not Working on Ie7
How Is CSS Applied by The Browser, and Are Repaints Affected by It
Video HTML5: How to Display Thumbnail from Video on a Specific Time
Arrange 2 Items Per Row Using Flexbox