Drupal 7.9 và hình ảnh linh hoạt

Drupal 7.9 giới thiệu lại các thuộc tính chiều cao và chiều rộng cho hình ảnh - Tôi hiểu điều này giúp cải thiện hiệu suất của giao diện người dùng, nhưng nó gây ra cho tôi các vấn đề trong khi sử dụng hình ảnh linh hoạt trong thiết kế web đáp ứng.

Đây là vấn đề tương tự như WhitefleaCH được đề cập trong bài đăng này: Làm cách nào tôi có thể ngăn các thuộc tính chiều cao / chiều rộng trên hình ảnh chạy qua hệ thống chủ đề?

Sử dụng độ rộng tối đa trong CSS vẫn chia tỷ lệ hình ảnh, tuy nhiên chiều cao vẫn như được xác định trong đánh dấu. Có ai biết làm thế nào để sửa lỗi này trong CSS hoặc xóa các thuộc tính chiều cao / chiều rộng khỏi hình ảnh cùng nhau không?

Kiểm tra theme_image():

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

Vì vậy, bạn cần phải làm sạch chiều rộng và chiều cao như các khóa cấp cao nhất mà còn từ mảng thuộc tính:

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

Và vâng, trong Drupal 7, các hàm quy trình biến có thể được sử dụng cho tất cả các móc theo chủ đề . Đừng quên xóa bộ nhớ cache của bạn để chức năng tiền xử lý mới được chọn.

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) . ' />';
}

Bạn có thể quan tâm đến việc kiểm tra mô-đun Hình ảnh Thích ứng :

Mô-đun hình ảnh Thích ứng cung cấp các phiên bản hình ảnh phù hợp với thiết bị từ các trường của bạn. Bạn có thể kích hoạt hình ảnh thích ứng bằng cách thêm hiệu ứng thích ứng vào bất kỳ kiểu hình ảnh nào của bạn.

Trong CSS ghi đè chiều cao hiện được xác định bằng cách đặt chiều cao thành 'tự động' sẽ thực hiện thủ thuật.