web-dev-qa-db-fra.com

Réglez la hauteur d'une div sur la moitié de la largeur

Comment puis-je définir la hauteur d'une div pour qu'elle corresponde exactement à la moitié de la largeur, lorsque la largeur changera en fonction de la taille de l'écran de l'utilisateur?

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

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

La largeur fonctionne très bien, elle se verrouille à 400 pixels si l’écran devient trop étroit et s’arrête également à 1200 pixels si l’écran devient trop grand. Mais je veux aussi que la hauteur change exactement de la moitié de la largeur à 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é (ce à quoi je ne m'attendais pas vraiment).

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

jsFiddle de ce qui précède pour référence.

Quelqu'un peut-il m'aider?

jquerycssheightwidth
14
Flickdraw

Si vous ne supportez que les navigateurs modernes, vous pouvez le faire: http://jsfiddle.net/kNPfh/

La mesure vw correspond à 1/100ème de la largeur de la fenêtre, donc 50vw correspond à 50% de la largeur de l'écran.

<div class='halfwidth'></div>

.halfwidth {
    width: 100%;
    height: 50vw;
    background-color: #e0e0e0;
}

sinon, vous pouvez utiliser: http://jsfiddle.net/ff7WC/

$(window).on( 'resize', function () {
    $('.halfwidth').height( $(this).width() / 2 );
}).resize();
24
Dom Day

Assurez-vous d'avoir un fichier js puis utilisez-le

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

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

3
user2568107

Vous pouvez le faire à l'aide du remplissage d'un élément parent, car le remplissage relatif (même en hauteur) est basé 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 à ce sujet http://wemadeyoulook.at/how-we-think-about/proportional-scaling-responsive-boxes

Vous pouvez aussi utiliser jquery pour cela, quelque chose comme:

$('.ss').css('height',width()/2);

Veuillez choisir la bonne réponse si cela résout votre doute en cliquant sur le symbole à gauche.

2
damien hawks

Ce n'est pas possible avec du CSS pur. Vous devez utiliser jQuery pour générer les nouvelles tailles . J'ai trouvé ceci dans SO: Utilisation de jQuery pour obtenir la taille de Viewport

0
Michael Walter