web-dev-qa-db-fra.com

Comment conserver le rapport hauteur / largeur de l'image mise à l'échelle avec une largeur maximale?

Lorsque j'utilise un style d'image qui met à l'échelle l'image d'origine, Drupal 7 (maintenant 7.14) imprime les attributs de hauteur et de largeur dans la balise img alors qu'auparavant, ce n'était pas le cas.
Alors avant, mon CSS img {max-width: 100%;} a conservé le rapport hauteur/largeur des images lorsqu'il est affiché dans une petite boîte (c'est-à-dire sur un écran mobile), mais se heurte désormais aux attributs de hauteur et de largeur. Drupal génère des boîtes englobantes sans hauteur explicite donc le résultat est une distorsion allongée.
Que puis-je faire - de préférence avec CSS seul, mais dans le php d'un fichier modèle si nécessaire - pour conserver le rapport hauteur/largeur?

mediatheming
6
iainH

C'est aussi simple que d'ajouter simplement height:auto;

img {
max-width:100%;
height:auto;
}
15
user842

Je ne l'ai pas essayé, mais en utilisant CSS, vous pourriez vous en tirer:

img {max-width: 100% !important;}

Sinon, je pense que la solution la plus simple serait simplement d'empêcher la fonction theme_image() de sortir les attributs width et height (dans template.php comme vous le suggérez). Il existe deux façons de procéder.

Tout d'abord, vous pouvez implémenter hook_preprocess_image() pour supprimer les attributs des variables de thème:

function MYTHEME_preprocess_image(&$variables) {
  foreach (array('width', 'height') as $key) {
    if (isset($variables[$key])) {
      unset($variables[$key]);
    }

    if (isset($variables['attributes'][$key])) {
      unset($variables['attributes'][$key]);
    }
  }
}

Cette méthode peut cependant être remplacée par quelque chose d'autre dans le système. Pour contourner cela, vous pouvez simplement remplacer la fonction theme_image() (ce n'est pas une fonction longue):

function MYTHEME_image($variables) {
  $attributes = $variables['attributes'];
  $attributes['src'] = file_create_url($variables['path']);

  // 'width' and 'height' have been removed here
  foreach (array('alt', 'title') as $key) {

    if (isset($variables[$key])) {
      $attributes[$key] = $variables[$key];
    }
  }

  return '<img' . drupal_attributes($attributes) . ' />';
}
4
Clive

J'utilise cette technique pour des images réactives avec un ajustement dans son conteneur (et aligné sur n'importe quel point) qui est également réactif. Avec cette technique, vous pouvez faire des miracles. Miracles réactifs.

https://stackoverflow.com/a/28073729/1663572

0
actimel