Tags down


SVG circle should adapt to CSS grid height without overlapping

By : 侯银博
Date : September 15 2020, 02:00 AM
I wish this helpful for you After fiddling around some time with this problem I figured this is not a problem with the grid layout.
Since you never define height/max-height or width/max-width for your SVG, what is being computed is width:auto and height:auto
code :
.container {
  display: grid;
  background-color: greenyellow;
  margin: 5px;
  min-height: 10px;
  min-width: 10px;

.portrait {
  max-height: 100px;
  max-width: 200px;

/* Add 25% margin left and right to center the image  OR set the image width to 50% */

.portrait>.aspect-ratio {
  margin: 0 25%;

.landscape {
  max-height: 200px;
  max-width: 100px;

.aspect-ratio {
  grid-column: 1;
  grid-row: 1;
  background-color: deeppink;
  border-radius: 50%;
  align-self: center;
  justify-self: center;

/* Set fixed max-height and max-width rule (33% proportion)  */

.portrait-1-3 {
  max-height: 100px;
  max-width: 300px;

/* Align image with the new proportion */

.portrait-1-3>.aspect-ratio {
  margin: 0 33.33%;

/* Removed max-height and let the container adjust the height according to the max-width rule and the proportion set  */

.portrait-any-height {
  max-width: 400px;

/* Height will be adjusted through the width/margin defined here, so 10% width will correspond to 40px of height (10%*400px)*(aspect ratio=1)*/

.portrait-any-height>.aspect-ratio {

/* Set fixed max-height and max-width rule (proportion doesn't matter)  */

.portrait-squeezed {
  max-height: 100px;
  max-width: 300px;

/* Make sure SVG complies with the the given max with and height (squeezing your svg)  */

.portrait-squeezed>.aspect-ratio {
  max-height: inherit;
  max-width: inherit;
<div class="container landscape">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>

<div class="container portrait">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>

<div class="container portrait-1-3">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>

<div class="container portrait-any-height">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>

<div class="container portrait-squeezed">
  <svg class="aspect-ratio" viewBox="0 0 1 1"></svg>

Share : facebook icon twitter icon

How can I make the height of a div section to automatically adapt to the height of its content?

By : Rafał Groń
Date : March 29 2020, 07:55 AM
wish help you to fix your issue Add a
with clear: both; after . Then You can remove height of #middle

Kivy Layout height to adapt to child widgets's height

By : xkcd
Date : March 29 2020, 07:55 AM
wish help you to fix your issue Don't use a BoxLayout, use a GridLayout with height: self.minimum_height, and set a manual size (size_hint_y: None and height: some_number) for each child widget.

Adapt parent div height to child div height in flexbox

By : M.S. Castro
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further I would like to adapt the parent div height to children height in CSS only. , Add align-items:flex-start; to #mainPane:
code :
  display: flex;
  align-items: flex-start;
  background-color: blue;      
.column {
  width: 250px;
  background-color: gray;
  margin: 5px 15px 5px 15px;
  background-color: white;
<section id="mainPane">
  <div class="column">
    <div class="colHeader">
    <div class="news">
    <div class="news">
    <div class="colFooter">
  <div class="column">
    <div class="colHeader">
    <div class="colFooter">

How to adapt height of a div to the height of an absolute div inside of it?

By : Foram Joshi
Date : March 29 2020, 07:55 AM
wish help you to fix your issue you can use relative positioning which will help you a lot. Update your code with following details

Why the height of container not adapt when the height of its image content has changed?

By : Jerico Serilico
Date : March 29 2020, 07:55 AM
To fix this issue If you img height is 50% of its parent, then its container must be twice as high as the img. Hence the lower half of the container must be blank content.
In essence, the container is defined in terms of its contents height. So if the image height was defined in terms of its container height, this would be a circular definition. To resolve this, the browser uses the width of the image together with the intrinsic aspect ratio of the image to determine the 100% height of image, and then adjusts the image height to be the specified percentage of that height. No matter what the specified percentage is, the container height will inevitably be the 100% height of the image.
Related Posts Related Posts :
  • How to the text down line when passing off the div tag
  • How to increase the vertical length of one element in a grid?
  • absolute positioning with flexbox
  • Overwriting an anchor tag styling in css bootstrap
  • circular on border of table with text in that
  • Cannot get <body> element to cover entire page
  • I don't know how to select h1 with css selector in this html....which one is the right ClassName for div?
  • How can I hide the square border around the button
  • flex items do not overflow
  • Prevent child from from stretching parent container
  • Unable to create an HTML Div Element that Fits to the text size
  • How can I turn an html checkbox into an icon
  • Can I edit multiple classes on bootstrap?
  • In my Angular form, I added keycode event with F2. Why is it not working on certein situations?
  • How to sprites many svg (better way to load many svg) in website
  • Input is a self closing tag. Or not?
  • Background color in Inputs HTML/CSS
  • Is there any option for avoid the & symbol in Angular 4 HTTP request?
  • keep svg centered when scaling up the background circle
  • Margins Facebook Like Button
  • Can't get CSS Flex to act responsive. Divs going off screen
  • How to properly style checkbox with letter in it?
  • Problem displaying <ul> element inside div
  • Could not change footer's backgroud color
  • How to store update data on modal laravel
  • left sticky position not working on smaller screens (keep sticky div width)
  • Change the color of a led on html
  • how to send a form data to server using post api in angular 7
  • how to remove firefox's Default Dropdown for input html
  • liquid variables stop working when layout is defined
  • Angular 7 :Apply style sheet to input field on change of value i.e when Entered date is less than current date
  • how to attach an arrow at the end of ellipsis dots
  • placing a div after a css ::after
  • h3 text its been overflown
  • Force footer to be alway in the bottom in CSS
  • How to implement scrollbar for particular row in html
  • Dropdown Bootstrap 4 doesn't work in production of angular's application
  • What's the difference in the order of applying selectors
  • What does CSS width 100% actually means for block element?
  • Fitting the image in the cell
  • Is there a way to add an edge to the curve gradient?
  • media queries not working on mobile screen size
  • Absolute position in CSS
  • How to align an image in a list ( ul > li ) in HTML/CSS?
  • How does this specific line of code work?
  • Why Does CSS in style Tag trum main.css?
  • pass id of the selected checkbox(which areloaded with ngFor) when it is checked
  • <b-form-select-option> not working in Bootstrap Vue
  • How to show the same element when hovering a li using only CSS?
  • Can you have one Style and put all CSS code inside?
  • What is the use of class="container" attribute inside <div> tag in bootstrap?
  • Spacing between element like tab functionality
  • background-image Property of Css is not working
  • CSS not working in HTML file - potential browser issue?
  • Little icon images added to span class inside <li> tags?
  • Could someone please explain what exactly "Overflow" in CSS does to a background in this example?
  • How do i add a border to a background shape as made in my code?
  • How to fix a paragraph tag overflowing on css column?
  • Bind Html with variables in Angular
  • How can I make a percentage circle like google?
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk