J'ai deux colonnes réactives inégales, le plus petit de droite est le texte et le plus grand à gauche est une image. Lorsque je redimensionnez la fenêtre du navigateur pour voir comment les colonnes correspondent à la page, cela fonctionne bien jusqu'à ce qu'il atteigne la largeur maximale 700px et la pile de colonne sur l'autre. La colonne du bas est bien, mais le sommet (image) ne montre pas l'image complète uniquement une petite bande passant le long de la largeur de la page. Comment puis-je l'obtenir pour ajuster la hauteur automatique pour afficher l'image complète?
J'ai essayé de définir la hauteur sur la colonne de gauche comme auto, mais cela n'a pas fonctionné et il a continué de montrer une petite bande. p>
p>
<body>
<div class="row">
<div class="column left";>
</div>
<div class="column right" style="background-color:#FDE4EC;">
<center> <p><font size="8">We Provide Quality Skin Care</font></p>
<p style = "font-family: Verdana, Geneva, sans-serif">Let us help you feel beautiful!</p>
<br>
<button class="button2"><b>BOOK NOW</b></button> </center>
</div>
</div>
</body>3 Réponses :
Retirez la hauteur et ajoutez min-hauteur
<div class="row"> <div class="column left";> <img src="http://i.imgur.com/k5gf0zz.jpg"> </div> <div class="column right" style="background-color:#FDE4EC;"> <center> <p><font size="8">We Provide Quality Skin Care</font></p> <p style = "font-family: Verdana, Geneva, sans-serif">Let us help you feel beautiful!</p> <br> <button class="button2"><b>BOOK NOW</b></button> </center> </div> </div>
Ajouter IMG tag sur votre HTML et retirez-le comme arrière-plan!
Ah qui a travaillé pour quand ils s'empilent sur l'autre mais maintenant ils ne sont pas instachés lorsque le navigateur est assez grand
Vérifiez Edition Post maintenant Ceci fonctionnera ou vérifie cette jsfiddle jsfiddle.net/2g1nway3/12
merci, puis-je demander comment réduire la largeur de l'image de la hauteur de la hauteur avec la colonne à droite avant de s'empiler sur les autres comme avant de s'empiler les deux colonnes à la même hauteur que l'image La largeur réduirait à mesure que l'écran réduit pour correspondre à l'autre colonne, mais la largeur de l'image est maintenant à 100% qui fonctionne lorsque les colonnes sont empilées mais quand elles ne sont pas ce n'est même pas avec la colonne de droite. @adel xx
Vérifiez la poste éditée! C'est ce que vous cherchez!
Merci pour votre sujet, je suis d'accord avec Chris, si nous pouvions avoir plus d'informations, il serait plus facile de savoir comment aider. Vous pouvez également utiliser quelque chose comme celui-ci dans votre fichier HTML, deux photos avec différentes tailles et utiliser une photo spécifique pour chaque taille de page.
<picture id="pic"> <source media="(min-width: 650px)" srcset="image.jpg"> <img src="image2.jpg" alt="same pic bigger size" style="width:auto;"> </picture>
Bienvenue à Stackoverflow! Pour faciliter la possibilité de comprendre votre problème, vous pouvez fournir un exemple plus complet, y compris HTML? Idéalement comme un extrait.
Fait, j'ai ajouté le HTML
Cela semble contraint par la hauteur des colonnes, qui est fixée à 300px
Notez que le et sont obsolètes pendant plusieurs années et ne doivent plus être utilisés. HTML.SPEC.WHATWG.ORG/DEV/OBSOLETE.HTML#OBSOLETE REDUITE >
Sans la hauteur de colonne fixée à 300px, l'image est une bande mince avant même de s'empiler sur l'autre.