J'essaie de créer une page dans laquelle l'image est à gauche et la légende (le texte) est à droite et la combinaison de l'image / du texte est centrée sur la page. Le défi que je suis confronté est que l'image pourrait être une taille ou un rapport d'aspect. J'ai besoin de l'image aussi grande que possible (tout en installant toujours à l'écran sans que l'utilisateur doive faire défiler). La hauteur d'image peut être déterminée à l'aide de JavaScript (j'utilise angular). J'ai esquissé les trois scénarios ici:
L'image pourrait être en orientation portrait (hauteur> largeur), orientation du paysage (largeur> hauteur), ou une image panoramique (largeur> hauteur et largeur est anormalement large). Quelques considérations pour les trois cas:
Espérons que le croquis doit clarifier ce que j'essaie de communiquer ici.
Je suis capable d'obtenir l'image et le texte côte à côte, mais je ne suis pas capable de les centrer dans tout trois scénarios.
3 Réponses :
CSS flexbox strong> a plus de support croiseur sur le système CSS
<div class="container">
<div class="article-container">
<div class="left-side">
<img src="https://i.imgur.com/ZwaMNmO.jpg" alt="" />
</div>
<div class="right-side">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint magni voluptas laboriosam. Unde, est eos?
</p>
</div>
</div>
</div>
Merci, travaille dans la plupart des cas, mais pour l'orientation portrait, le combo de texte image n'est pas centré ... Il y a trop d'espace entre l'image et le texte.
Pourriez-vous me donner une capture d'écran de la vue Portrait? Et croquis de la façon dont vous voulez ressembler à la portrait?
Permettez-moi d'expliquer mon approche que pour ma compréhension résout votre exigence. D'abord, j'ai déclaré côté gauche puis déclara le côté droit dans le HTML. J'ai alors décidé d'utiliser Flex pour créer votre grille, puis de rendre l'image à la fois sensible aux images paysagers et portrait. Je suppose que votre conteneur aura une largeur fixe, mais si vous supprimez cette largeur statique, elle fonctionnera de toute façon (et vous n'avez pas besoin d'ajouter la marge: 0 auto; propriété).
J'espère que cela résoudra votre Question et vous encourage à utiliser la puissance de Flex! P>
p>
<div class="container">
<div class="left-side">
<img src="https://via.placeholder.com/500x1200">
</div>
<div class="right-side">
{{ caption }}
</div>
</div>Le centrage fonctionne bien, cependant, l'image ne fait pas échouer. Les images orientées par paysage semblent petites à l'écran même s'il y a beaucoup de place pour que cela soit plus grand.
C'est juste une question de régler max-hauteur au VH qui vous convient le plus
Je vais passer de mon commentaire en une réponse car il semble être proche de vos besoins.
La grille pourrait être utilisée pour centrer et réorganiser des objets à l'écran. P>
Exemple: P> >
p>
<div class="body">
<div class="right-side">
<h1>HTML Ipsum Presents</h1>
<p>
<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
<code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.
</p>
<h2>Header Level 2</h2>
</div>
<div class="left-side">
<img src="http://dummyimage.com/200x400" />
</div>
</div>
<div class="body">
<div class="right-side">
<h1>HTML Ipsum Presents</h1>
<p>
<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
<code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.
</p>
<h2>Header Level 2</h2>
</div>
<div class="left-side">
<img src="http://dummyimage.com/800x400" />
</div>
</div>
<div class="body">
<div class="right-side">
<h1>HTML Ipsum Presents</h1>
<p>
<strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
<code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.
</p>
<h2>Header Level 2</h2>
</div>
<div class="left-side">
<img src="http://dummyimage.com/1400x600" />
</div>
</div>
Dans un appareil mobile, la mise en page sera la même?
Non, c'est juste pour le bureau. Pas préoccupé par les appareils mobiles. Vous pouvez supposer que la largeur de l'écran sera supérieure à la hauteur de l'écran.
Vous cherchez quelque chose de ce genre? Codepen.io/gc-nomade/pen/rwnxnrb Si vous devez filtrer le portrait / Image de paysage, JavaScript sera nécessaire de partir du côté serveur Ajout d'une classe une fois que le rapport est vérifié. CSS est au moment incapable de filtrer une image sur son rapport.
@ G-Cyr Votre solution semble fonctionner assez bien. Essayer de le casser, reposera.
@ G-Cyr fonctionne plutôt bien, si vous pouvez convertir votre commentaire en réponse, je vais marquer cela comme la réponse.