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;
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.
Comments