Ustawienie wysokości elementu na dany procent jego szerokości.

Question

Witam, 

zastanawiam się czy jest możliwy zabieg w CSS taki, że ustawiamy sobie jakiś element, który ma jakaś daną szerokość, a wysokość tego elementu ustawiać na dany procent jego szerokości. Chaczyk tkwi w tym, że szerokość jest dynamiczna - wyrażona w procentach. No bo gdyby była by to wartość statyczna to wystarczy sobie policzyć :)
Da się jakoś pobrać aktualną szerokość elementu i potem ją wykorzystać?
Aby zobrazować o co mi chodzi:

div
{
width: 100%;
height: 0.62 * width;
}

Tak wiem, powyższy zapis jest durny, ale chcę jakoś pokazać co mi chodzi po głowie :)
Da się coś takiego zrobić?

Answer 1

Wszystko się da zrobić. Za pomocą JQuery.

Może to ci pomoże http://api.jquery.com/css/ , http://www.w3schools.com/jquery/jquery_css.asp

Comments

Ok, ogarnąłem, problem jest tylko taki, że

var width = $(".entry-thumb").css("width");

nie zwraca liczby, lecz stringa (?), czyli np. 659px, więc jeśli zapiszę 0.6 * width, to to nie zadziała.

Jakieś pomysły jak to przekonwertować na liczbę?

---

Może tak:

width=width.substr(0,width.length-2);

 

---

Dosłowanie przed chwilą znalazłem to rozwiązanie. Dzięki za pomoc!

Wszystko działa oczywiście.

Answer 2

W css bez preprocesora nie, ale da się w js:

var width=document.getElementById("div").width;
document.getElementById("div").height=0.62*width;

Jeśli koniecznie chcesz to zrobić w css, to poczytaj o preprocesorach.

Comments

Jest tylko jeden problem, rzeczony element jest (a właściwie to będzie) zdjęciem wpisu w wordpresie i rzeczony element ma klasę, nie id, ponieważ będzie na stronie kilka takich. Jak w takim wypadku mam przechwycić szerokość?

/edit

Spróbuję z jquery, jak zaproponował kolega ponieżej i dam znać :)

---

Nie jestem do końca pewny.

var width=document.getElementsByClassName("div").width;
document.getElementsByClassName("div").height=0.62*width;

Jeśli nie działa, to trzeba zrobić pętle, która do każdego elementu danej klasy przypisze wysokość.

---

Coś nie bardzo chce mi to działać, ani tak: 

var width=document.getElementsByClassName("div").width;
document.getElementsByClassName("div").height=0.62*width;

ani tak: 

$(document).ready(function(){
		var width = $(".entry-thumb").css("width");
		$(".entry-thumb").css("height",0.62 * width);
	});

 

---

Na jqery się nie znam, był sposób, aby każdemu elementowi o danej klasie nadać np. wysokość, pamiętam, że trzeba było zrobić pętle w js. Niestety nie mogę tego znaleźć.

Możesz jeszcze spróbować preprocesora, ale chyba nie ma to sensu.