Use hook to remove height from img tag?

Question

The theme I am building is responsive and so many images have max-width:100%; applied in CSS. Can I use a hook in template.php to strip the height attribute from img tags because it is causing lots of distortion issues, and how would I go about this?

Thanks for your time!

Answer 1

Assuming that your images are being built by theme('image',...) you can override its default...

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

  foreach (array('width', 'height', 'alt', 'title') as $key) {

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

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

}

...in your template.php file along the lines of this:

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

  foreach (array('alt', 'title') as $key) {

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

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

}

and now those pesky height=s and width=s should be gone.

Answer 2

Rather than editing Drupal behavior can also just set img CSS to height:auto