2010-04-15 7 views
2

Pouvez-vous me montrer le code html complété où il est un rectangle avec "hauteur = 75% de mon écran" et "widtht = 4/3 de hauteur". Donc, il devrait être 3: 4 reсtangle où la hauteur dépend de mon screenheight, mais la largeur ne dépend pas de ma largeur d'écran. Seulement de l'écran. Je pensais avoir compris le temps passé, mais ce n'était pas le cas.La largeur dépend de la hauteur

J'ai ceci:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); 
    }); 
</script> 

Et je ne sais pas quoi faire avec la largeur.

+1

[Vous avez déjà posé une question similaire?] (Http://stackoverflow.com/questions/2631972/how-to-use-width-relative-from-height) Si vous avez perdu la question et que vous y avez répondu, vous peut les retrouver dans votre page de profil auquel vous pouvez accéder en cliquant n'importe où où votre nom apparaît comme un lien comme [TRAVA] (http://stackoverflow.com/users/315765/trava), comme dans la barre supérieure :) – BalusC

+0

J'ai pensé que je comprenais, mais ce n'est pas le cas ( – TRAVA

+1

Bonjour! "Donne-moi le codez complet" est peu susceptible de vous donner une réponse significative, c'est un site "donne moi un indice", pas "fais mon travail pour moi" – Piskvor

Répondre

1

Vous devez activer pour calculer la largeur, il est impossible de le faire uniquement avec HTML.

La propriété concernée est window.innerHeight; multipliez cela par (3/4) pour obtenir la hauteur, et puisque (3/4) * (4/3) == 1, window.innerHeight est (incidemment) égal à la largeur désirée. Puis, définissez les propriétés .height et .width de l'élément.

Remarque: Je suppose que vous souhaitez avoir un rectangle proportionnel à la fenêtre du navigateur et non à l'écran de l'utilisateur. Si vous voulez réellement la taille de l'écran, utilisez window.screen.height au lieu de window.innerHeight; méfiez-vous cependant: avec les écrans larges et les configurations multi-écrans à la hausse, le navigateur peut signaler des dimensions assez bizarres.

+0

$ (document) .ready (function() {$ (". example7"). colorbox ({largeur: "80%", hauteur: "80%", iframe: true}); }); Je mets "width = window.innerHeight" et ça ne marche pas. – TRAVA

+1

@TRAVA: Vous êtes censé passer un objet - en utilisant {width: window.innerHeight, height: window.innerHeight * 0.75} * pourrait fonctionner. On dirait que vous utilisez '=' au lieu de ':' ici. – Piskvor

+0

Ouais, d'accord. Merci beaucoup! – TRAVA

1

HTML ne le dicte pas. CSS peut, mais CSS n'a pas de logique mathématique interne directe. Donc, ce que vous devez faire est d'utiliser javascript. Lorsque la page se charge, saisissez la largeur de l'objet, faites votre calcul, puis définissez la hauteur.

Si vous êtes nouveau sur JS, je vous suggérerais d'apprendre l'une des bibliothèques, comme jQuery. En jQuery, il avait l'air quelque chose comme ceci:

$('#myDiv').width($(this).height()*.75); 
+0

Ouais, je le sais. Pouvez-vous m'aider et poster ce script terminé? – TRAVA

+0

@TRAVA: vous semblez vous demander ceci: "J'ai toutes les pièces et les instructions, pouvez-vous les assembler pour moi?" Il est peu probable que quelqu'un le fasse. pouvez-vous l'essayer vous-même et signaler les problèmes spécifiques que vous avez rencontrés? Je – Piskvor

+0

cette: \t \t < script type = "text/javascript" src = "colorbox/jquery.colorbox.js "> et je ne sais pas quoi faire avec la largeur – TRAVA

Questions connexes