Maintenir les proportions d'une div avec CSS
Je veux créer une div qui puisse changer sa largeur/hauteur en fonction de la largeur de la fenêtre.
Existe-t-il des règles CSS3 permettant à la hauteur de changer en fonction de la largeur, tout en maintenant son rapport de format?
Je sais que je peux le faire via JavaScript, mais je préférerais utiliser uniquement du CSS.
Créez simplement un wrapper <div> avec une valeur de pourcentage pour padding-bottom, comme ceci:
div {
width: 100%;
padding-bottom: 75%;
background: gold; /** <-- For the demo **/
}<div></div>Il en résultera un <div> avec une hauteur égale à 75% de la largeur de son conteneur (format 4: 3).
Cela repose sur le fait que pour le rembourrage:
Le pourcentage est calculé par rapport à la largeur du bloc contenant la boîte générée [...] (source: w3.org , emphasis mine)
Valeurs de rembourrage pour les autres formats et 100% largeur:
aspect ratio | padding-bottom value
--------------|----------------------
16:9 | 56.25%
4:3 | 75%
3:2 | 66.66%
8:5 | 62.5%
Placer du contenu dans le div:
Afin de conserver les proportions de la div et d’empêcher son contenu de s’étirer, vous devez ajouter un enfant en position de positionnement absolu et l’étirer sur les bords de l’emballage avec:
div.stretchy-wrapper {
position: relative;
}
div.stretchy-wrapper > div {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
Voici un demo et un autre plus en profondeur demo
vw unités:
Vous pouvez utiliser vw unités à la fois pour width et height de l'élément. Cela permet de conserver les proportions de l'élément, en fonction de la largeur de la fenêtre.
vw: 1/100ème de la largeur de la fenêtre. [MDN]
Vous pouvez également utiliser vh pour la hauteur de la fenêtre ou même vmin/vmax pour utiliser la plus petite/la plus grande des dimensions de la fenêtre (discussion ici ).
Exemple: ratio d'aspect 1: 1
div {
width: 20vw;
height: 20vw;
background: gold;
}<div></div>Pour les autres formats, vous pouvez utiliser le tableau suivant pour calculer la valeur de la hauteur en fonction de la largeur de l'élément:
aspect ratio | multiply width by
-----------------------------------
1:1 | 1
1:3 | 3
4:3 | 0.75
16:9 | 0.5625
Exemple: grille 4x4 de divs carrés
body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
div {
width: 23vw;
height: 23vw;
margin: 0.5vw auto;
background: gold;
}<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>Voici un Fiddle avec cette démo et voici une solution pour créer une grille de carrés réactive avec un contenu verticalement et horizontalement centré .
Le support du navigateur pour les unités vh/vw est IE9 + voir canIuse pour plus d’informations
J'ai trouvé un moyen de faire cela en utilisant CSS, mais vous devez faire attention car cela peut changer en fonction de la fluidité de votre site Web. Je l'ai fait afin d'intégrer une vidéo avec un rapport de format constant dans une portion de largeur fluide de mon site Web.
Disons que vous avez une vidéo intégrée comme celle-ci:
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
Vous pouvez ensuite placer tout cela dans une div avec une classe "vidéo". Cette classe de vidéos constituera probablement l’élément fluide de votre site Web, de sorte qu’elle ne comporte pas de contrainte de hauteur directe, mais lorsque vous redimensionnez le navigateur, sa largeur change en fonction de la fluidité du site. Ce serait l'élément que vous essayez probablement d'obtenir votre vidéo incorporée tout en conservant un certain rapport d'aspect de la vidéo.
Pour ce faire, je place une image avant l'objet incorporé dans la classe "vidéo" div.
!!! L'important est que l'image présente le rapport de format correct que vous souhaitez conserver. Assurez-vous également que la taille de l'image est AT au moins aussi grande que la plus petite que vous attendez de la vidéo (ou de tout ce que vous conservez le A.R.) à obtenir en fonction de votre disposition. Cela évitera tout problème potentiel dans la résolution de l'image lorsqu'elle est redimensionnée en pourcentage. Par exemple, si vous souhaitez conserver un rapport hauteur/largeur de 3: 2, n'utilisez pas simplement une image 3px par 2px. Cela peut fonctionner dans certaines circonstances, mais je ne l'ai pas testé et il serait probablement préférable d'éviter.
Vous devriez probablement déjà avoir une largeur minimale comme celle-ci définie pour les éléments fluides de votre site Web. Si ce n'est pas le cas, il est judicieux de le faire afin d'éviter de couper des éléments ou de ne pas se chevaucher lorsque la fenêtre du navigateur devient trop petite. Il est préférable d’avoir une barre de défilement à un moment donné. La plus petite largeur qu'une page Web devrait avoir se situe aux alentours de 600px (y compris les colonnes de largeur fixe), car les résolutions d'écran ne sont pas réduites à moins que vous n'utilisiez des sites conviviaux pour les téléphones. !!!
J'utilise un fichier png complètement transparent, mais je ne pense pas que le résultat soit important si vous le faites correctement. Comme ça:
<div class="video">
<img class="maintainaspectratio" src="maintainaspectratio.png" />
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
</div>
Vous devriez maintenant pouvoir ajouter du CSS semblable au suivant:
div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }
Assurez-vous également de supprimer toute déclaration de hauteur ou de largeur explicite dans l'objet et les balises d'intégration généralement fournies avec le code d'intégration copié/collé.
Son fonctionnement dépend des propriétés de position de l’élément video class et de l’élément que vous souhaitez conserver. Il tire parti de la manière dont une image conservera son rapport de format correct lorsqu'elle sera redimensionnée dans un élément. Il dit à tout élément de l'élément video class de tirer pleinement parti de l'immobilier fourni par l'image dynamique en forçant sa largeur/hauteur à 100% de l'élément de classe video ajusté par l'image.
Assez cool, hein?
Vous devrez peut-être jouer un peu avec cela pour le faire fonctionner avec votre propre design, mais cela fonctionne étonnamment bien pour moi. Le concept général est là.
Elliot m'a inspiré pour cette solution - merci:
aspectratio.png est un fichier PNG complètement transparent ayant la taille de votre rapport de format préféré, dans mon cas 30x10 pixels.
HTML
<div class="eyecatcher">
<img src="/img/aspectratio.png"/>
</div>
CSS3
.eyecatcher img {
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url(../img/autoresized-picture.jpg);
}
Remarque:background-size est une fonctionnalité CSS3 qui pourrait ne pas fonctionner avec vos navigateurs cibles. Vous pouvez vérifier l’interopérabilité (par exemple, sur caniuse.com ).
Pour ajouter à la réponse de Web_Designer, le <div> aura une hauteur (composée entièrement de remplissage inférieur) de 75% de la largeur de son élément contenant. Voici un bon résumé: http://mattsnider.com/css-using-percent-for-margin-and-padding/ . Je ne sais pas pourquoi cela devrait être ainsi, mais c'est comme ça.
Si vous voulez que votre div ait une largeur autre que 100%, vous avez besoin d'un autre div d'habillage sur lequel définir la largeur:
div.ar-outer{
width: 60%; /* container; whatever width you want */
margin: 0 auto; /* centered if you like */
}
div.ar {
width:100%; /* 100% of width of container */
padding-bottom: 75%; /* 75% of width of container */
position:relative;
}
div.ar-inner {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
J'ai récemment utilisé quelque chose de similaire à l'astuce d'image d'Elliot pour me permettre d'utiliser des requêtes de support CSS pour créer un fichier de logo différent en fonction de la résolution du périphérique, mais toujours proportionnellement comme le ferait un <img> (je règle le logo en tant qu'image d'arrière-plan transparente. png avec le bon format). Mais la solution de Web_Designer me permettrait d'économiser une requête http.
Comme indiqué dans ici sur w3schools.com et quelque peu réitéré dans cette réponse acceptée , valeurs de remplissage en pourcentages (souligné par moi):
Spécifie le remplissage en pourcentage de la largeur de l'élément contenant
Ergo, voici un exemple correct de DIV réactive qui conserve un rapport de format 16: 9:
CSS
.parent {
position: relative;
width: 100%;
}
.child {
position: relative;
padding-bottom: calc(100% * 9 / 16);
}
.child > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
HTML
<div class="parent">
<div class="child">
<div>Aspect is kept when resizing</div>
</div>
</div>
En vous basant sur vos solutions, j'ai fait quelques astuces:
Lorsque vous l'utiliserez, votre code HTML sera uniquement
<div data-keep-ratio="75%">
<div>Main content</div>
</div>
Pour l'utiliser de cette façon, faites: CSS:
*[data-keep-ratio] {
display: block;
width: 100%;
position: relative;
}
*[data-keep-ratio] > * {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
et js (jQuery)
$('*[data-keep-ratio]').each(function(){
var ratio = $(this).data('keep-ratio');
$(this).css('padding-bottom', ratio);
});
Et, ayant cela, il vous suffit de définir attr data-keep-ratio sur hauteur/largeur et le tour est joué.
Vous pouvez utiliser un svg. Faites en sorte que la position du conteneur/emballage soit relative, placez le svg en premier comme position statique et ensuite le contenu en position absolue (en haut: 0; à gauche: 0; à droite: 0; en bas: 0;)
Exemple avec 16: 9 proportions:
image.svg: (peut être inséré dans src)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>
CSS:
.container {
position: relative;
}
.content {
position: absolute;
top:0; left:0; right:0; bottom:0;
}
HTML:
<div class="container">
<img style="width: 100%" src="image.svg" />
<div class="content"></div>
</div>
Notez que svg en ligne ne semble pas fonctionner, mais vous pouvez le coder et l'intégrer à l'attribut img src comme ceci:
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />
C'est une amélioration par rapport à la réponse acceptée:
- Utilise des pseudo-éléments au lieu de div wrapper
- Le rapport d'aspect est basé sur la largeur de la boîte au lieu de son parent
- La boîte s'étire verticalement lorsque le contenu devient plus grand
.box {
margin-top: 1em;
margin-bottom: 1em;
background-color: #CCC;
}
.fixed-ar::before {
content: "";
float: left;
width: 1px;
margin-left: -1px;
}
.fixed-ar::after {
content: "";
display: table;
clear: both;
}
.fixed-ar-16-9::before {
padding-top: 56.25%;
}
.fixed-ar-3-2::before {
padding-top: 66.66%;
}
.fixed-ar-4-3::before {
padding-top: 75%;
}
.fixed-ar-1-1::before {
padding-top: 100%;
}
.width-50 {
display: inline-block;
width: 50%;
}
.width-20 {
display: inline-block;
width: 20%;
}<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>Comme @ web-tiki montre déjà un moyen d'utiliser vhvw, j'ai également besoin d'un moyen de centrer l'écran, voici un code d'extrait pour portrait _/9:16.
.container {
width: 100vw;
height: calc(100vw * 16 / 9);
transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2));
}
translateY gardera ce centre à l'écran. calc(100vw * 16 / 9) correspond à la hauteur attendue pour 9/16 .(100vw * 16 / 9 - 100vh) correspond à la hauteur de débordement. Par conséquent, tirez vers le haut overflow height/2 pour qu'il reste au centre de l'écran.
Pour le paysage, et gardez 16: 9, vous montrez utiliser
.container {
width: 100vw;
height: calc(100vw * 9 / 16);
transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}
Le rapport 9/16 est facile à modifier, vous n'avez pas besoin de 100:56.25 ou 100:75 prédéfini. Si vous souhaitez vérifier la hauteur en premier, vous devez changer la largeur et la hauteur, par exemple height:100vh;width: calc(100vh * 9 / 16) pour le portrait de 9h16.
Si vous souhaitez vous adapter à différentes tailles d’écran, vous pouvez également vous intéresser
- taille-fond couverture/contenir
- Le style ci-dessus est similaire à contenir, dépend du rapport largeur: hauteur.
- object-fit
- couverture/contenir pour tag img/video
@media (orientation: portrait)/@media (orientation: landscape)- Requête de média pour
portrait/landscapepour changer le ratio.
- Requête de média pour
SCSS est la meilleure solution dans mon cas; en utilisant un attribut de données:
[data-aspect-ratio] {
display: block;
max-width: 100%;
position: relative;
&:before {
content: '';
display: block;
}
> * {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
}
[data-aspect-ratio="3:1"]:before {
padding-top: 33.33%;
}
[data-aspect-ratio="2:1"]:before {
padding-top: 50%;
}
[data-aspect-ratio="16:9"]:before {
padding-top: 56.25%;
}
[data-aspect-ratio="3:2"]:before {
padding-top: 66.66%;
}
[data-aspect-ratio="4:3"]:before {
padding-top: 75%;
}
[data-aspect-ratio="1:1"]:before {
padding-top: 100%;
}
[data-aspect-ratio="3:4"]:before {
padding-top: 133.33%;
}
[data-aspect-ratio="2:3"]:before {
padding-top: 150%;
}
[data-aspect-ratio="9:16"]:before {
padding-top: 177.77%;
}
[data-aspect-ratio="1:2"]:before {
padding-top: 200%;
}
[data-aspect-ratio="1:3"]:before {
padding-top: 300%;
}
Par exemple :
<div data-aspect-ratio="16:9"><iframe ...></iframe></div>
disons que vous avez 2 divs. Le div div est un conteneur et l'intérieur peut être tout élément dont vous avez besoin pour conserver son rapport (img ou un iframe youtube ou autre)
html ressemble à ceci:
<div class='container'>
<div class='element'>
</div><!-- end of element -->
disons que vous devez conserver le ratio de "l'élément"
ratio => 4 à 1 ou 2 à 1 ...
css ressemble à ceci
.container{
position: relative;
height: 0
padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/
}
.element{
width : 100%;
height: 100%;
position: absolute;
top : 0 ;
bottom : 0 ;
background : red; /* just for illustration */
}
le rembourrage est spécifié en%, il est calculé en fonction de la largeur et non de la hauteur ... Donc, en gros, la largeur de la hauteur importe toujours. qui va garder le ratio.
Bien que la plupart des réponses soient très cool, la plupart d’entre elles nécessitent une image déjà correctement dimensionnée ... D’autres solutions ne fonctionnent que pour une largeur et ne tiennent pas compte de la hauteur disponible, mais vous souhaitez parfois adapter le contenu à une certaine hauteur également. .
J'ai essayé de les associer pour créer une solution entièrement portable et redimensionnable ... L'astuce consiste à utiliser le redimensionnement automatique d'une image, mais à utiliser un élément svg en ligne au lieu d'utiliser une image pré-rendue ou toute autre forme de deuxième requête HTTP ...
div.holder{
background-color:red;
display:inline-block;
height:100px;
width:400px;
}
svg, img{
background-color:blue;
display:block;
height:auto;
width:auto;
max-width:100%;
max-height:100%;
}
.content_sizer{
position:relative;
display:inline-block;
height:100%;
}
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background-color:rgba(155,255,0,0.5);
}<div class="holder">
<div class="content_sizer">
<svg width=10000 height=5000 />
<div class="content">
</div>
</div>
</div>Notez que j’ai utilisé de grandes valeurs dans les attributs width et height du fichier SVG, car il doit être supérieur à la taille maximale attendue, car il ne peut que diminuer. L'exemple rend le ratio de la div 10: 5
Juste une idée ou un hack.
div {
background-color: blue;
width: 10%;
transition: background-color 0.5s, width 0.5s;
font-size: 0;
}
div:hover {
width: 20%;
background-color: red;
}
img {
width: 100%;
height: auto;
visibility: hidden;
}<div>
<!-- use an image with target aspect ratio. sample is a square -->
<img src="http://i.imgur.com/9OPnZNk.png" />
</div>Si vous souhaitez insérer un carré dans la fenêtre d'affichage en mode portrait ou paysage (aussi grand que possible, mais rien ne colle à l'extérieur), utilisez vw/vh pour l'orientation portrait/landscape:
@media (orientation:portrait ) {
.square {
width :100vw;
height:100vw;
}
}
@media (orientation:landscape) {
.square {
width :100vh;
height:100vh;
}
}
J'ai rencontré ce problème plusieurs fois et j'ai donc mis au point une solution JS. En gros, cela ajuste la hauteur de domElement en fonction de la largeur de l'élément selon le rapport que vous spécifiez. Vous pouvez l'utiliser comme suit:
<div ratio="4x3"></div>
Sachez que, puisqu'il définit la hauteur de l'élément, l'élément doit être un display:block ou un display:inline-block.
Dites que vous devez maintenir la largeur: 100 pixels et la hauteur: 50 pixels (c'est-à-dire 2: 1) Faites juste ce calcul:
.pb-2to1 {
padding-bottom: calc(50 / 100 * 100%); // i.e., 2:1
}
J'aimerais partager ma solution, où j'ai une balise img- remplissant un certain rapport d'aspect. Je ne pouvais pas utiliser background en raison du manque de support du CMS et je ne préférerais pas utiliser une balise de style comme celle-ci: <img style="background:url(...)" />. En outre, la largeur est de 100%, il n'est donc pas nécessaire de définir une taille fixe, contrairement à certaines solutions. Il évoluera en réponse!
.wrapper {
width: 50%;
}
.image-container {
position: relative;
width: 100%;
}
.image-container::before {
content: "";
display: block;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ratio-4-3::before {
padding-top: 75%;
}
.ratio-3-1::before {
padding-top: calc(100% / 3);
}
.ratio-2-1::before {
padding-top: 50%;
}<div class="wrapper"> <!-- Just to make things a bit smaller -->
<p>
Example of an 4:3 aspect ratio, filled by an image with an 1:1 ratio.
</p>
<div class="image-container ratio-4-3"> <!-- Lets go for a 4:3 aspect ratio -->
<img src="https://placekitten.com/1000/1000/" alt="Kittens!" />
</div>
<p>
Just place other block elements around it; it will work just fine.
</p>
</div>Vous pouvez utiliser la disposition de flux (FWD).
https://en.wikipedia.org/wiki/Adaptive_web_design
Il va mettre à l'échelle et maintenir la mise en page, c'est un peu complexe mais permet à une page de redimensionner sans pousser le contenu comme (RWD).
Cela semble réactif, mais c'est en train de changer d'échelle. https://www.youtube.com/watch?v=xRcBMLI4jbg
Vous pouvez trouver la formule de redimensionnement CSS ici:
Je suis tombé sur une solution intelligente en utilisant <svg> et display:grid.
L'élément Grid vous permet d'occuper le même espace avec deux (ou plus) éléments, sans qu'il soit nécessaire de spécifier lequel définit la hauteur. Ce qui signifie que, hors de la boîte, le plus grand définit le rapport.
Cela signifie que vous pouvez l'utiliser tel quel, quand vous savez que le contenu ne sera jamais assez grand pour remplir le "ratio" complet et que vous cherchez simplement un moyen de positionner le contenu dans cet espace (par exemple, pour le centrer dans les deux sens display:flex; align-items:center; justify-content:center).
C'est à peu près la même chose que d'utiliser un <img> transparent avec display:block et un ratio prédéterminé, sauf que le <svg> est plus léger et considérablement plus facile à modifier (pour modifier le ratio de manière réactive, le cas échéant).
<div class="ratio">
<svg viewBox="0 0 1 1"></svg>
<div>
I'm square
</div>
</div>
.ratio {
display: grid;
}
.ratio > * {
grid-area: 1/1/1/1;
}
Tout ce que vous avez à faire est de changer le ratio <svg>s:
<svg viewBox="0 0 4 3"></svg><svg viewBox="0 0 16 9"></svg>
Voir le travail:
.ratio {
display: grid;
}
.ratio > * {
grid-area: 1/1/1/1;
}
/* below code NOT needed for setting the ratio
* I just wanted to mark it visually
* and center contents
*/
.ratio div {
border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
}<div class="ratio">
<svg viewBox="0 0 7 1"></svg>
<div>
Fixed ratio 7:1
</div>
</div>Si vous avez besoin d'une solution dans laquelle l'élément de contenu n'est pas autorisé à définir le rapport lorsqu'il est plus grand (avec débordement masqué ou automatique), vous devez définir position:relative sur la grille et position:absolute; height:100%; overflow-y: auto; sur le contenu. Exemple:
.ratio {
display: grid;
position: relative;
}
.ratio > * {
grid-area: 1/1/1/1;
}
.ratio > div {
height: 100%;
overflow-y: auto;
position: absolute;
/* the rest is not needed */
border: 1px solid red;
padding: 0 1rem;
}<div class="ratio">
<svg viewBox="0 0 7 1"></svg>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A scelerisque purus semper eget. Sem nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. A cras semper auctor neque vitae tempus quam pellentesque nec. Morbi enim nunc faucibus a pellentesque sit amet porttitor. Arcu odio ut sem nulla. Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida neque. Cras tincidunt lobortis feugiat vivamus at augue eget. Laoreet sit amet cursus sit amet. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Leo in vitae turpis massa sed elementum tempus egestas sed. Egestas integer eget aliquet nibh. Dolor sit amet consectetur adipiscing elit.
<p>Ut aliquam purus sit amet. Eget magna fermentum iaculis eu non diam phasellus vestibulum. Diam in arcu cursus euismod quis viverra nibh. Nullam vehicula ipsum a arcu cursus vitae congue. Vel orci porta non pulvinar neque laoreet suspendisse. At tellus at urna condimentum mattis pellentesque. Tristique senectus et netus et malesuada. Vel pretium lectus quam id leo in. Interdum velit euismod in pellentesque. Velit euismod in pellentesque massa placerat duis. Vitae suscipit tellus mauris a diam maecenas sed enim.
<p>Mauris a diam maecenas sed enim ut sem. In hendrerit gravida rutrum quisque. Amet dictum sit amet justo donec enim diam. Diam vulputate ut pharetra sit amet aliquam id. Urna porttitor rhoncus dolor purus non enim praesent. Purus in massa tempor nec feugiat nisl pretium. Sagittis vitae et leo duis ut. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum. Aliquam purus sit amet luctus venenatis lectus magna. Sit amet purus gravida quis blandit turpis. Enim eu turpis egestas pretium aenean. Consequat mauris nunc congue nisi. Nunc sed id semper risus in hendrerit gravida rutrum. Ante metus dictum at tempor. Blandit massa enim nec dui nunc mattis enim ut.
</div>
</div>