Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

css - SCSS - Get container width as height

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;
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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);
  }
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...