Zachowanie proporcji diva

Question

Witajcie. Robię stronę w z bootstrapem na studia i mam problem z zachowaniem proporcji diva w kolumnie. Chciałbym aby owy div był zawsze kwadratowy ale oczywiście jego rozmiar ma sie zmieniac. Co powinienem zrobić?

Comments

Co Cię skłoniło, żeby użyć bootstrap do swojego projektu?

---

Wykładowca

---

@Kacper000, dlaczego div? Nie pracujesz na HTML5?

---

dlaczego div? Nie pracujesz na HTML5?

A to <div> nie jest zgodny z HTML5?

https://www.w3.org/TR/html52/grouping-content.html#the-div-element

Inna rzecz, że autor nie podał kontekstu użycia div-a.

---

 JSHolic

w HTML5 zamiast div'ów powinno się używać <Article > ,<Section> i <Aside>. Nie po to dodali lepszą alternatywę, żeby tylko na nią patrzeć.

---

Zgadza się, ale nie znaczy to, że div nie należy do HTML5 ani że nie można go użyć, gdy żaden inny znacznik nie pasuje w danym kontekście:

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

---

@techno16, Oczywiście posiadam w swoim kodzie, takie sekcje jak <article> <section> itd jednak według mnie nie powinno się wszystkiego zamykać  w owych znacznikach 

Answer 1

Ustawić minimalną możliwą SZEROKOŚĆ I  WYSOKOŚĆ, jako kwadrat tzn. równe sobie
Domyślnie div jest elementem blokowym, więc jako prostokąt- będzie zawsze, więc kwestia scalowania pozostaje

W Html jako gotowa klasa 
 

<div class="square">
    <h1>This is a Square</h1>
</div>

.square {
    background: #000;
    width: 50vw;
    height: 50vw;
}
.square h1 {
    color: #fff;
}

stylizacja 

Comments

Niestety nie działa ta metoda. Przy okazji czy mógłbyś mi nieco wyjaśnić o co chodzi z tym "vw"? Podaje diva o klasie "image" który ma zachowywać te proporcje. Siedzi w "cookie" który jest kolumną 

.cookie
{
    float:left;
}

.image
{
	margin-top:20px;
	margin-right:20px;
	margin-left:20px;
	overflow:hidden;
	border: 4px solid #b68e0d;
}

 

---

vh i vw

1vw jest równy 1% szerokości obszaru roboczego ekranu, 1vh jest równy 1% wysokości obszaru roboczego ekranu. Poniżej prezentuję przykłady wykorzystania tych jednostek.

div {
    background: blue;
    width: 20vw;
    height: 20vh;
}

Jednostki można wykorzystywać w różnych sytuacjach, także przy określaniu rozmiaru czcionki na stronie.

p {
    font-family: Arial;
    font-size: 20vw;
}

Podsumowując, powyższy blok div, jak i czcionka w paragrafach będzie się dostosowywała do obszaru roboczego ekranu.

vmax i vmin

vmax czyli viewport maximum, vmin czyli viewport minimum. Tutaj wartość dostosowuje się automatycznie.

div {
    background: blue;
    width: 20vmin;
    height: 20vmin;
}

1 vmin jest równy mniejszej wartości z 1vw lub 1vh, 1 vmax jest równy większej wartości ze zbioru {1vh, 1vw}. W powyższym przykładzie blok div przyjmie wartość (szerokość i wysokość) połowy krótszego boku obszaru roboczego ekranu, czyli szerokości (przy trybie pionowym telefonu na przykład).