web-dev-qa-db-ja.com

最大幅でスケーリングされた画像のアスペクト比を維持するにはどうすればよいですか？

元の画像を拡大縮小する画像スタイルを使用すると、Drupal 7（現在は7.14））はimgタグに高さと幅の属性を出力しますが、以前はそうではありませんでした。
以前は、私のCSS img {max-width: 100%;}小さなボックス（モバイル画面など）に表示されたときに画像のアスペクト比を維持していましたが、高さと幅の属性と衝突するようになりました。 Drupalは明示的な高さのない囲みボックスを生成するため、結果は細長い歪みになります。
アスペクト比を維持するために、できればCSSだけで、必要に応じてテンプレートファイルのphpで何ができますか？

mediatheming
6
iainH

height:auto;を追加するだけです。

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

私は試したことはありませんが、CSSを使用すると、次のようにうまくいく可能性があります。

_img {max-width: 100% !important;}
_

そうでない場合、私は theme_image() 関数が幅と高さの属性を出力しないようにすることをお勧めします（ご提案のとおり、template.php内）。これを行うにはいくつかの方法があります。

まず、hook_preprocess_image()を実装して、テーマ変数から属性を削除します。

_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]);
    }
  }
}
_

ただし、そのメソッドmayは、システムの他の何かによってオーバーライドされる可能性があります。これを回避するには、theme_image()関数を完全にオーバーライドします（長い関数ではありません）。

_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

私はこのテクニックを、レスポンシブな画像とそのコンテナーにフィットして（そしてその中の任意のポイントに揃えて）、レスポンシブな画像に使用します。このテクニックを使えば、奇跡を起こすことができます。敏感な奇跡。

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

0
actimel