Automatyczne dostosowanie wymiarów

pytanie zadane 16 października 2016 w HTML i CSS przez Bakr Mądrala (6,850 p.)

Witam,

W jaki sposób dostosować rozmiary elementu na stronie?

Chodzi o to, że ustawiłem szerokość elementu na 25%, a wysokość na 200px, aby tworzył koło (border-radius). Bez ustawienia szerokości powstawała elipsa, bo ikona (czcionka) wewnątrz elementu nie zajmowała jego całej wysokości.

Natomiast przy zmniejszenie rozdzielczości z elementu tworzy się elipsa.

Moje pytanie- czy da się zrobić tak, aby wysokość pozostawała dokładnie taka sama jak szerokość przy zmianie rozdzielczości?

komentarz 16 października 2016 przez ScriptyChris Mędrzec (190,190 p.)

Pokaż kod.

Moje pytanie- czy da się zrobić tak, aby wysokość pozostawała dokładnie taka sama jak szerokość przy zmianie rozdzielczości?

Prawdopodobnie szukasz CSSowego transform: scale(x, y) => https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

komentarz 16 października 2016 przez Bakr Mądrala (6,850 p.)

                <section class="about">
           <div class="container">
    
    
<div class="col-25 tab-50 project-box">
        <div class="icon">
            <span class="flaticon-vehicle-speedometer"></span>
        </div>
    <h2>SZYBKOŚĆ</h2>
    </div>
<div class="col-25 tab-50 project-box">
      <div class="icon">
    <i class="flaticon-backup"></i>
</div>
        <h2>KOPIE ZAPASOWE</h2>
</div>  
<div class="col-25 tab-50 project-box">
    <div class="icon">
        <span class="flaticon-coding"></span>
    </div>
    <h2>PHP 7</h2>
</div>
<div class="col-25 tab-50 project-box">
    <div class="icon">
    <span class="flaticon-locked"></span>
    </div>
    <h2>BEZPIECZEŃSTWO</h2>
</div>

    </div>
</section>

.icon
{
    border: 2px solid white;
    border-radius: 100%;
    height: 260px;
    margin-top: 20px;
}

.col-25
    {
        width: calc(25% - 20px);
        float: left;
        margin-left: 8px;
        margin-right: 8px;
        color: white;
    }