Régler la hauteur d'une div à la moitié de ce que la largeur est

Comment puis-je régler la hauteur d'une div à être exactement la moitié de ce que la largeur, lorsque la largeur change selon les utilisateurs de la taille de l'écran?

J'ai le jeu suivant sur une div...

#div1 {
    min-width:400px;
    width:100%;
    max-width:1200px;
    height:400px;
    background-color:red;  
}

La largeur fonctionne très bien sur ce, il se verrouille à 400 pixels si l'écran devient trop étroit et il s'arrête aussi à l'étendre à 1200 pixels si l'écran est trop grand. Mais, je veux aussi la hauteur de changer pour être exactement la moitié de ce que la largeur est à un moment donné. Quelque chose comme...

#div1 {
    min-width:400px;
    width:100%;
    max-width:1200px;
    height:width/2;
    background-color:red;  
}

Cela n'a pas fonctionné (dont je n'étais pas vraiment en espérant que cela).

Je préfère utiliser les CSS si c'est possible, mais que j'aimerais aussi la hauteur de changer si l'utilisateur ajuste manuellement la taille de la fenêtre internet trop (comme ce qui se passe avec la largeur pour le moment). Je ne suis pas sûr que c'est possible en CSS, cependant, si il y a un moyen de l'obtenir par Jquery, je serais heureux de l'utiliser trop.

jsFiddle de la ci-dessus pour la référence.

Quelqu'un peut m'aider?

OriginalL'auteur Flickdraw | 2013-07-16

23

Si vous êtes ok avec prenant uniquement en charge les navigateurs modernes, vous pouvez le faire: http://jsfiddle.net/kNPfh/

La vw mesure est en 1/100e de la fenêtre d'affichage de la largeur, de sorte 50vw est de 50% de la largeur de l'écran.
```
<div class='halfwidth'></div>

.halfwidth {
    width: 100%;
    height: 50vw;
    background-color: #e0e0e0;
}
```
si non, vous pouvez utiliser: http://jsfiddle.net/ff7WC/
```
$(window).on( 'resize', function () {
    $('.halfwidth').height( $(this).width() / 2 );
}).resize();
```
Fait quelques modifications à la présente et il fonctionne exactement de la façon dont je le voulais. jsfiddle.net/R5WqL Merci! Par curiosité, quelles versions d'IE de soutien de la première option?
np, vw est pris en charge dans internet explorer v9.0+ ... voici le support graphique
Super, merci pour l'information.
pourriez-vous fournir un lien vers la documentation pour ce type de valeurs?
voici le w2c lien si vous voulez le authoratative définition, et voici le navigateur de compatibilité ... autre que cela, google est votre ami

OriginalL'auteur Dom Day

Assurez-vous que vous avez un fichier js ensuite utiliser cette

$(window).load(function(){
    $('.element').height($('.element').width() / 2);
    $(window).resize(function(){
        $('.element').height($('.element').width() / 2);
    });
});

http://jsfiddle.net/Hive7/8CNtU/2/

OriginalL'auteur

2

Vous pouvez le faire avec l'aide de rembourrage sur un élément parent, parce que par rapport rembourrage (même hauteur-sage) est basée sur la largeur de l'élément.

CSS:
```
.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}
```
Pour plus de détails, voir cet article sur le sujet
http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes

Vous pouvez également utiliser jquery pour que, quelque chose comme:
```
$('.ss').css('height',width()/2);
```
Veuillez choisir ce que la bonne réponse si cela résout votre doute en cliquant sur le symbole de la flèche vers la gauche.

OriginalL'auteur damien hawks
0

Ce n'est pas possible avec pur CSS.
Vous devez utiliser jQuery pour generetate les nouvelles tailles.
J'ai trouvé ce: Utilisation de jQuery Pour Obtenir la Taille de la Fenêtre d'affichage

OriginalL'auteur Michael Walter

Vous devez vous connecter pour publier un commentaire.