Drupal 7.9と柔軟なイメージ

Drupal 7.9は高さと幅の属性を画像に再導入しました-これはフロントエンドのパフォーマンスを向上させるのに役立つことを理解していますが、レスポンシブWebデザインの流れで柔軟な画像を使用しているときに問題が発生しています。

これは、この投稿で言及されているwhitefleaCHと同じ問題です：テーマシステムを介して実行される画像の高さ/幅属性を防ぐにはどうすればよいですか？

CSSでmax-widthを使用しても画像は拡大縮小されますが、高さはマークアップで定義されたままです。CSSでこれを修正する方法、または画像から高さ/幅属性をすべて一緒に削除する方法を誰かが知っていますか？

チェックアウトtheme_image()：

foreach (array('width', 'height', 'alt', 'title') as $key) {
  if (isset($variables[$key])) {
    $attributes[$key] = $variables[$key];
  }
}
return '<img' . drupal_attributes($attributes) . ' />';

したがって、トップレベルのキーとしてだけでなく、属性配列からも幅と高さをクリーンアップする必要があります。

function mymodule_preprocess_image(&$variables) {
  unset(
    $variables['width'],
    $variables['height'],
    $variables['attributes']['width'],
    $variables['attributes']['height']
  );
}

そして、はい、Drupal 7では、可変プロセス関数をすべてのテーマフックに使用できます。キャッシュをクリアして、新しい前処理関数が取得されるようにすることを忘れないでください。

function YOUR_THEMENAME_image($vars) {
  $attributes = $vars['attributes'];
  $attributes['src'] = file_create_url($vars['path']);

  // remove width and height attributes
  foreach (array('alt', 'title') as $key) {
    if (isset($vars[$key])) {
      $attributes[$key] = $vars[$key];
    }
  }
  return '<img' . drupal_attributes($attributes) . ' />';
}

アダプティブイメージモジュールのチェックアウトに興味があるかもしれません：

アダプティブ画像モジュールは、フィールドから画像のデバイスに適したバージョンを提供します。任意の画像スタイルにアダプティブエフェクトを追加して、アダプティブ画像をアクティブ化できます。

CSSでは、heightを 'auto'に設定して現在定義されている高さをオーバーライドすることでうまくいくはずです。