Partage

[CSS] Hauteur d'une div égale à sa largeur

Tout ça en responsive sur div rotatives !

Sujet résolu
11 janvier 2018 à 14:04:10

Bonjour à tous (ou reBonjour vu que la première écriture de mon post a été détecté comme spam... :'()

Je viens vers vous car je suis désespéré sur un cas assez particulier, dans le cadre d'un stage je dois faire du theming sur wordpress. J'ai placé 4 div dans un row (boostrap) dont 3 rotatives (d'où les innombrables div de "bricolage"). 

Je voudrais donc que la hauteur des div soit égale à leur largeur, j'avais réussi à le faire avec cette méthode et beaucoup d'acharnement il y a 2 jours mais après m'être foiré j'ai du tout recommencer... et impossible de le refaire !

Le HTML :

<div class="row">
    <div class="col-md-3">
        <div class="flip-container">
            <div class="front">
                <p class="flip-front-title">
                    Blablabla
                </p>
                <p class="flip-p">
                    Blablabla
                </p>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="flip-container">
            <div class="flipper">
                <div class="front">
                    <p class="flip-front-title">
                        Blablablala fibre
                    </p>
                    <p class="flip-p">
                        Blablabla
                    </p>
                </div>
                <div class="back">
                    <p class="flip-back-title">
                        Blablabla
                    </p>
                    <ul class="menu_flipcard">
                        <li><a href="#">Blablabla</a></li>
                        <li><a href="#">Blablabla</a></li>
                        <li><a href="#">Blablabla</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="flip-container">
            <div class="flipper">
                <div class="front-color" style="background-color: #BD1CA5;">
                    Blablabla
                </div>
                <div class="back">
                    <p class="flip-back-title">
                        Blablabla
                    </p>
                    <ul class="menu_flipcard">
                        <li><a href="#">Blablabla</a></li>
                        <li><a href="#">Blablabla</a></li>
                        <li><a href="#">Blablablae</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="flip-container">
            <div class="flipper">
                <div class="front-image" style="background-image: url(\'' . $frontimage . '\');">
                    Blablabla
                </div>
                <div class="back">
                    <p class="flip-back-title">
                        Blablabla
                    </p>
                    <ul>
                        <li><a href="#">Blablabla</a></li>
                        <li><a href="#">Blablabla</a></li>
                        <li><a href="#">Blablabla</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Le CSS :

.col-md-3 {
    position: relative;
}

.col-md-3:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.col-sm-2 {
    position: relative;
}

.col-sm-2:before {
    content: "";
    display: block;
    padding-top: 50%;
}

.flip-container {
    width: 100%;
	perspective: 1000px;
    box-sizing: border-box;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
	transform: rotateY(-180deg);
}

.flip-container, .front, .front-color, .front-image, .back {
	width: 100%;
    height: 100%;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
}

/* hide back of pane during swap */
.back {
	transform: rotateY(-180deg);
	background-color: #FFF;
    background: -webkit-linear-gradient(bottom, rgb(245, 245, 245) 22%, rgb(255, 255, 255) 49%);
    background: -o-linear-gradient(bottom, rgb(245, 245, 245) 22%, rgb(255, 255, 255) 49%);
    background: -ms-linear-gradient(bottom, rgb(245, 245, 245) 22%, rgb(255, 255, 255) 49%);
    background: -moz-linear-gradient(bottom, rgb(245, 245, 245) 22%, rgb(255, 255, 255) 49%);
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px;
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    border: 1px solid black;
    height: 100%;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
	background-color: #333;
    background: -webkit-linear-gradient(top, rgb(105, 105, 105) 11%, rgb(51, 51, 51) 55%);
    background: -o-linear-gradient(top, rgb(105, 105, 105) 11%, rgb(51, 51, 51) 55%);
    background: -ms-linear-gradient(top, rgb(105, 105, 105) 11%, rgb(51, 51, 51) 55%);
    background: -moz-linear-gradient(top, rgb(105, 105, 105) 11%, rgb(51, 51, 51) 55%);
	color: white;
	padding: 10px;
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    border: 1px solid black;
    height: 100%;
}

.front-color {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
	font-size: 2vw;
	text-align: center;
	color: white;
	padding: 10px;
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    border: 1px solid black;
    height: 100%;
}

.front-image {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
	background-size: 100%;
	background-image: url('Blablabla.jpg');
	color: white;
	padding: 10px;
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
    border: 1px solid black;
    height: 100%;
}


.flip-front-title {
    font-size: 1.3vw;
    line-height: 20px;
    font-weight: bold;
}

.flip-back-title {
    color: #BD1CA5;
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
}

.flip-p {
    line-height: 18px;
}

.back > ul {
    line-height: 18px;
    font-size: 10px;
    margin-left: 15px;
    margin-right: 0px;
}

.back > ul > li :hover {
    color: #BD1CA5;
}

.back > ul > li:hover {
    color: #BD1CA5;
}

.back > ul > li > a {
    text-decoration: none;
    color: black;
}

.menu_flipcard {
    font-size: 1vw;
}

Le code CSS n'en est qu'au stade d'un test parmis tant d'autre ce matin... C'est un beau bordel, je crois. :-°
J'espère que j'ai été assez clair, et que vous pourrez m'aider... 

Merci d'avance !

-
Edité par FlipCardFlipette 11 janvier 2018 à 14:08:45

11 janvier 2018 à 15:28:07

Hello,

Tu peux le faire de cette manière en utilisant les vw / vh, ça fonctionnera si tu sais quelle largeur exactement doivent faire tes div par rapport à ton viewport.

Ou comme ça en JS/jQuery aussi mais c'est un peu crade, même si ça fonctionne.

Il existe probablement d'autres solutions ;)

11 janvier 2018 à 15:46:52

Merci beaucoup ta première solution marche ! Seulement c'est pas terrible pour le coté responsive. Quand je réduis la fenêtre et que ça passe au mode "mobile", les div ne font que 20vw j'aimerais qu'elles prennent la largeur de la page.
11 janvier 2018 à 15:57:47

De rien,

Responsive > media-queries ;)

11 janvier 2018 à 16:00:21

FlipCardFlipette a écrit:

Merci beaucoup ta première solution marche ! Seulement c'est pas terrible pour le coté responsive. Quand je réduis la fenêtre et que ça passe au mode "mobile", les div ne font que 20vw j'aimerais qu'elles prennent la largeur de la page.


Salut,

C'est très simple, il suffirait de changer la largeur voulue dans des media queries. 

EDIT : trop lent... ;)

-
Edité par Mewen_bzh 11 janvier 2018 à 16:00:44

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?

[CSS] Hauteur d'une div égale à sa largeur

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown