2 balises div côte à côte pleine largeur de différentes largeurs (40%/60%) qui se réduisent à et s'empilent à 100% de largeur

J'ai essayé et échoué à obtenir ce qui suit au travail.2 balises div côte à côte pleine largeur de différentes largeurs (40%/60%) qui se réduisent à et s'empilent à 100% de largeur

J'ai 2 balises div qui contiennent chacune une image. Div A sur la gauche contient une image avec une taille native de 768 x 400, Div B sur la droite a une taille de 1152 x 400. Donc, ces images représentent 40% de largeur et 60% de largeur. Je souhaite que ceux-ci occupent toute la largeur de l'écran et qu'ils soient réduits (toujours côte à côte à 40% et 60%) jusqu'à un point, et qu'ils s'empilent les uns sur les autres à 100% largeur (disons à toute résolution sous 720px de large) tout en respectant leur format natif. Donc, l'image dans la Div B serait en fait 'plus courte' que la Div A à ce stade.

J'ai essayé d'illustrer cela avec l'image jointe.

Toute aide serait grandement appréciée.

Merci,

https://s13.postimg.org/qq94pfq3b/2_divs.png

Source

2017-02-17 user1154955

vous pouvez utiliser requête média CSS – Uday

On dirait que vous cherchez quelqu'un pour le faire pour vous. C'est très trivial, as-tu essayé de googler ça, ou de chercher ici SO pour une réponse? –

Pouvez-vous fournir une partie de votre code? – Armin

Quelque chose comme cela devrait fonctionner. Notez que le point de rupture pour empiler ces images les unes sur les autres est à 767px, ce qui est une résolution standard où css mobile devrait commencer.

HTML:

<div class="a"> 
    <img src="image1.png"> 
</div> 
<div class="b"> 
    <img src="image2.png"> 
</div>

CSS:

.a, .b { float: left; } 
.a img, .b img { width: 100%; } 
.a { width: 40%; } 
.b { width: 60%; } 

@media screen and (max-width: 767px) { 
    .a, .b { width: 100%; } 
}

EDIT:

Je viens de remarquer que vos images ne sont pas le même rapport. Comment voulez-vous qu'ils soient côte à côte comme vous l'avez imaginé, en respectant leur ratio d'origine, comme vous l'avez écrit, sans que l'un soit plus grand que l'autre?

Source

2017-02-17 14:36:38

Merci! Cela a fonctionné parfaitement! La réduction fonctionne toujours parfaitement et les images conservent leurs proportions (et ont la même hauteur). Vous pouvez le voir dans la "petite résolution de bureau" 1280 px large partie de l'image que j'ai liée. – user1154955

Vous pouvez le faire avec bootstrap. Voici un petit extrait qui peut vous aider:

.a { 
 
    background-color: blue; 
 
    height: 100px; 
 
} 
 

 
.b { 
 
    background-color: red; 
 
    height: 100px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="a col-xs-12 col-sm-5"></div> 
 
<div class="b col-xs-12 col-sm-7"></div>

Source

2017-02-17 14:40:04 Arkej

2 balises div côte à côte pleine largeur de différentes largeurs (40%/60%) qui se réduisent à et s'empilent à 100% de largeur

Répondre

Questions connexes