Changeset 76556 in spip-zone


Ignore:
Timestamp:
Sep 27, 2013, 1:28:45 PM (6 years ago)
Author:
cedric@…
Message:

logos responsive : le height forcé en dur sur le img n'est pas satisfaisant car quand on réduit le conteneur et la largeur de l'image cela génère un blanc (Thierry)

A la place il faut créer un conteneur dont le ratio est identique à celui de l'image (technique des intrinsic ratio http://alistapart.com/article/creating-intrinsic-ratios-for-video via http://mobile.smashingmagazine.com/2013/09/16/responsive-images-performance-problem-case-study/) qui va s'adapter.
On a donc un span.spip_logos > span > img

Sur le premier span on ne met aucun display:block inline car sinon il prend la main sur celui de la CSS, mais si spip_logos n'est pas stylé avec un float ou un display:block il va s'afficher en pleine largeur de son conteneur (ce qui n'est pas si mal), avec une hauteur proportionnelle.

Si la hauteur de spip_logos est fixée en CSS, cela tronquera l'image en n'affichant que le haut dans la limite de la hauteur fxée.

Location:
_plugins_/z-core
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/z-core/paquet.xml

    r74423 r76556  
    22        prefix="Zcore"
    33        categorie="outil"
    4         version="2.2.1"
     4        version="2.2.2"
    55        etat="stable"
    66        compatibilite="[3.0.0;3.0.*]"
  • _plugins_/z-core/zcore_options.php

    r69351 r76556  
    4646        $src = extraire_attribut($img,"src");
    4747        $style = extraire_attribut($img,"style");
    48         $style = "background:url($src) no-repeat center;background-size:100%;height:{$h}px;$style";
     48        $style = "background:url($src) no-repeat center;background-size:100%;position:absolute;top:0;left:0;width:100%;height:100%;$style";
    4949        $class = extraire_attribut($img,"class");
    5050        $img = inserer_attribut($img,"src",$gif);
     
    5252        $img = inserer_attribut($img,"class","");
    5353
    54         return "<span class='$class'>$img</span>";
     54        $ratio = round($h*100/$w,2);
     55        return "<span class='$class' style=\"width:{$w}px;max-width:100%;\"><span style=\"display:block;position:relative;height:0;width:100%;padding-bottom:{$ratio}%;overflow:hidden;\">$img</span></span>";
    5556}
    5657?>
Note: See TracChangeset for help on using the changeset viewer.