SCSS - Get container width as height

Orar

Is there a way to get the container width of a child element in calculation of the child element height without using JavaScript.

Say, rendering an image in an 16:9px aspect ratio which is 1.778 : 1px. If i set the image width to 100% of the container. How do i set the height to

PSEUDO:

$width: 100%;
height: (100% * 0.5625)px;

I'm trying to get the value of 100% using calc(), but doesn't work.

calc(100% + 1)px;
Orar

I found it. Sass interpolation does the work. Its possible to use sass interpolation to reference a sibling property.

.container {
  width: 100%;

  img {
    width: 100%;
    height: calc(#{width} * 1.778);
  }
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Get width and height of container from view

How to get constraints like Height and Width of container in flutter

CSS: Get inline image to use 100% of width and height of container

How to get rid of error caused by Container's fixed width and height

How does width/height get calculated on position:absolute container with text in it and width:auto;height:auto?

Container expanding animation based on the height/width of the container

Get width and height of ViewPager

How to get SVG to scale to full height and width of parent container using JavaScript?

How can DIV container (with Position: fixed) get it's height and width? (Using % for units)

Responsive triangle with border to container's height and width

Ext.Container height and width on 100 percent

Responsive Video Container -> no width/height issue

How to test container's width/height size

Set Container height equal to width in Flutter

How to set the width and height as per container sizes?

Flutter - Container width and height fit parent

Make img fill container width/height with jQuery

Variable size of container in flutter? Either width or height

CSS Grid stretch height and width to container

How to make the width of a container match its height

Size container to smallest item height + max width

How to resize container height based on browser width

Padding on div changes height and width of parent container

get height and width of hidden video

Get height/width of tkinter Canvas

glfw get monitor width/height

Get width/height of SVG element

How to get the width and the height in glium?

Get reported screen width and height