Responsive Web Design (RWD) - Gestion des images fluide
Source http://thesassway.com/intermediate/responsive-web-design-part-1
Les images s'ajustent en fonction de leur container avec RWD.
pour navigateurs actuels | support IE 6 (et +) - feuille spécifique pour IE |
---|---|
|
@mixin scale-image-ie($image) { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src="#{image_url($image, true, false)}", sizingMethod="scale" ); } |
background-size - CSS3 (IE 9 et +)
Si l'on a une image de fond qui doit s'adapter au container, la propriété CSS3 background-size
est utile (à partir de IE 9, Firefow 3.6, ).
Contain et cover : contain peux laisser une marge, cover élargira l'image pour remplir - masque souvent une partie de l'image. Voir sa démo
Il existe aussi un mixin compass background-size
Voir http://compass-style.org/reference/compass/css3/background_size/
img.cover { @include background-size(cover); }
Format des images
Eviter les .png car certains devices ne les supportent pas => JPEG ou GIF
Sur le web
- https://html.spec.whatwg.org/multipage/embedded-content.html#embedded-content
- http://responsiveimages.org/
-
http://thinkshout.com/blog/2014/07/responsive-images-in-drupal-with-the-picture-module/
drupal 8 utilise dans le core un nouveau module, Picture, qui a été porté pour drupal 7 (cf drupal.org/project/picture). Il y décrit, avec breakpoints comment gérer les images responsive sous drupal 7.
voir la démo picture 7 : http://picture7d.h011.attiks.com
J'ai trouvé (et pris des notes) un article en FR, qui part de cet article et va plus loin (source: stephanemartinw.com) - son module.
sur ce site: art direction et l’élément picture (et srcset
)