Type photo

Un exemple de montage avec photos éparpillées me fait penser à vous proposer des bordures pour donner une présentation type photo.

Les bordures d'une image peuvent être définies indivduellement; nous allons utiliser cette possibilité pour décorer notre image:

<p style="width: 10vw; height: 10vw; border-bottom: 5vh solid white; border-left: 1vh solid white; border-right: 1vh solid white; border-top: 1vh solid white; box-shadow: 0 0 0 0.1vh black; background: url('http://ekladata.com/t85TnUYiSTy_IImeYnMUzQI8vTA@200x112.jpg'); background-size: 16vw 10vw; background-position: 50% 50%; margin: 0 auto;">&nbsp;</p>

Mon image est hébergée en 1920px par 1080px et dimensionnée par @200x112 soit 200px par 112px (16/9).Pourquoi 200px ? Car 10vw sur mon écran de 1920px=192px et en ratio 16/9; hauteur=108px.

Pour qu'elle remplisse la hauteur du montage (10vw), où elle est placée en fond, est dimensionnée en  16vw par 10vw.

Elle est positionnée en son centre car mon sujet est centré.

Les bordures irrégulières font: bottom (basse)5vh; celles du haut et des côtés font 1vh.

La bordure extérieure noire est obtenue par une ombre sans flou.

Je vais proposer un montage avec photos éparpillées qui s'agrandissent au clic gauche maintenu.... à suivre !