Utwórz element div o współczynniku kształtu 1: 1 wiedząc tylko o jego wysokości w procentach

Question

Zastanawiałem się, czy możesz mi w tym pomóc. Mam div (w kolorze białym), gdzie muszę umieścić dwa okrągłe przyciski (na zielono) na granicach. Wszystko powinno być zrobione przy pomocy CSS. To powinno wyglądać tak: Screenshot

Teraz chodzi o to, że nie wiem, rozmiar biały div, a ja nie wiem, to w momencie stworzenia, ponieważ zostanie on dodany do DOM potem. Wiem tylko, że biały div ma procentową szerokość i wysokość w stosunku do przyszłego rodzica. Tak więc w momencie tworzenia, ponieważ nie zostało jeszcze dodane, żadne wywołania funkcji width(), height() lub jej css nie będą działać. Widziałem wszystkie te fragmenty, które mówią, jak utworzyć element div ze stałym współczynnikiem proporcji. Potrzebuję tego teraz, potrzebuję przycisku, aby był 1: 1, ale wszystko, co wiem o wymiarach, to to, że musi to być 100% wysokości białego elementu div (i dlatego jego szerokość powinna być równa jego wysokości). Wszystkie przykłady, które widziałem, zakładają, że znasz szerokość i aby wysokość zachowała proporcje. W moim przypadku to, co wiem, to wysokość (100%) i chcę dostosować szerokość. Nie mam pojęcia, jak to osiągnąć.

To jest mój urywek:

body{ 
 
    background-color: #DCDCDC; 
 
} 
 
.container { 
 
    width: 50%; 
 
    height: 7%; 
 
    background: white; 
 
    border-radius: 20px; 
 
    position: absolute; 
 
} 
 
.arrow { 
 
    background: green; 
 
    border-radius: 20px; 
 
    height: 100%; 
 
    position: absolute; 
 
} 
 
.arrow:after{ 
 
    content: ""; 
 
    display: block; 
 
    padding-right: 100%; 
 
} 
 
.arrow:last-child { 
 
    right: 0; 
 
}

<div class="container"> 
 
    <div class="arrow"></div> 
 
    <div class="arrow"></div> 
 
</div>

https://jsfiddle.net/7bxecL9m/

Jeśli wiesz, jak mogę to zrobić bez wprowadzania stałą wartość (jQuery użycie jest oczywiście ważny), I Naprawdę to doceniam.

Dzięki.

Answer 1

Dlaczego nie robi stałą szerokość w procentach za strzałką:

.arrow { 
    background: green; 
    border-radius: 20px; 
    height: 100%; 
    position: absolute; 
    width: 10%; 
} 

Answer 2

body{ 
 
    background-color: #DCDCDC; 
 
} 
 
.container { 
 
    width: 50%; 
 
    height: 7%; 
 
    background: white; 
 
    border-radius: 20px; 
 
    position: absolute; 
 
} 
 
.container:after,.container:before{ 
 
    content: " "; 
 
    display: block; 
 
    padding: 4%; 
 
    z-index: 999; 
 
    top: 0; 
 
    position:absolute; 
 
    background: green; 
 
    border-radius: 50%; 
 
} 
 
.container:before { 
 
    left: 0; 
 
} 
 
.container:after{ 
 
    right: 0; 
 
}

<div class="container"> 
 
</div>

można osiągnąć stosując before i after CSS pseudo selektorów. Sprawdzasz to Example.

Answer 3

Istnieje wiele zmiennych tutaj:

• Od kontenera height jest % i okrąg radius jest px jednostki, jedna jest statyczna, a drugi będzie zmienić.
• Jedynym sposobem, aby zachować w stosunku 1: 1 z tylko HTML/CSS, zważywszy kontenera height% będzie zmiana rozmiaru okręgu height jak dobrze byłoby, aby odizolować okręgu divwidth & height do czegoś statycznego jak px jednostek.
• Teraz, skoro nie powiedział stałe wymiary, jedyne co mogę myśleć o to, aby skomentować .arrow „s 100%height, aby zapobiec zmianie rozmiaru innym niż 1: 1, i zagnieżdżanie się div wewnątrz .arrow powstrzymać 1: 1 z statyczna jednostki (idealnie wpływające na .arrow bezpośrednio byłoby mniej kodu, ale jeśli nie chcesz/nie możesz ustawić ich na tym elemencie, może to rozważyć).

Jeśli chcesz, aby kółko pozostało okrągłe w miarę rozwijania się zawartości, musisz dynamicznie dopasować wysokość do szerokości. Aby to osiągnąć, możesz użyć JavaScriptu, ale Twój border-radius jest powiązany ze statycznymi jednostkami container w px, ponieważ pojemnik zawsze będzie większy, coś takiego jak border-radius: 50% nie będzie działało dla obu, 50% radius okręgu nigdy nie będzie pasowało do 50% z container (to znaczy, jeśli zależy Ci na wyrównaniu promienia).

body { 
 
    background-color: #DCDCDC; 
 
} 
 
body, 
 
html { 
 
    height: 100%; 
 
} 
 
.container { 
 
    width: 50%; 
 
    height: 37%; 
 
    background: white; 
 
    border-radius: 20px; 
 
    position: relative; 
 
} 
 
.arrow { 
 
    background: green; 
 
    border-radius: 20px; 
 
    /*height: 100%;*/ 
 
    position: absolute; 
 
    overflow: hidden; 
 
} 
 
.bLimit { 
 
    height: 40px; 
 
    width: 40px; 
 
    line-height: 40px; 
 
} 
 
.arrow:after { 
 
    content: ""; 
 
    display: block; 
 
    padding-right: 100%; 
 
} 
 
.arrow:last-child { 
 
    right: 0; 
 
}

<div class="container"> 
 
    <div class="arrow"> 
 
    <div class="bLimit">button overflow</div> 
 
    </div> 
 
    <div class="arrow"> 
 
    <div class="bLimit">button</div> 
 
    </div> 
 
</div>

Answer 4

Dodatkowo istnieje możliwość, aby uzyskać ten wynik za pomocą obrazu (które nie będą widoczne) pożądanego stosunku.

W tym przypadku stosunek wynosi 1: 1, więc użyjemy obraz 50px (ale może to być dowolny rozmiar)

.container { 
 
    width: 300px; 
 
    height: 20px; 
 
    border: solid 1px blue; 
 
    margin: 40px; 
 
    position: relative; 
 
} 
 
.container:nth-child(2) { 
 
    height: 40px; 
 
} 
 
.container:nth-child(3) { 
 
    height: 60px; 
 
} 
 
.arrow { 
 
    height: 100%; 
 
    background-color: red; 
 
    opacity: 0.5; 
 
    position: absolute; 
 
    border-radius: 50%; 
 
    transform: translateX(-50%); 
 
} 
 
.arrow:last-child { 
 
    right: 0px; 
 
    transform: translateX(50%); 
 
} 
 
img { 
 
    height: 100%; 
 
    opacity: 0; 
 
}

<div class="container"> 
 
    <div class="arrow"> 
 
    <img src="https://placehold.it/50x50"> 
 
    </div> 
 
    <div class="arrow"> 
 
    <img src="https://placehold.it/50x50"> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="arrow"> 
 
    <img src="https://placehold.it/50x50"> 
 
    </div> 
 
    <div class="arrow"> 
 
    <img src="https://placehold.it/50x50"> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="arrow"> 
 
    <img src="https://placehold.it/50x50"> 
 
    </div> 
 
    <div class="arrow"> 
 
    <img src="https://placehold.it/50x50"> 
 
    </div> 
 
</div>