Search code examples
cssimageimage-resizing

Selectively resize images via CSS

Working on a Drupal website where different sized images can be added to any single node.

I have the following css to resize images to manageable sizes:

img {
    width: 100%;
    height: auto;
}

But that obviously applies to all images regardless of their width or height.

Is there a way to apply media-queries or some other strategy to filter images over a certain width or heigh and apply the styling above to them ?

Solution

  • It sounds as though you want to limit the size of img whatever the media, viewport, dimensions are so I don’t think media queries will help you.

    But you can limit width and height so imgs will take on their natural width and height if they fit, otherwise they will go up to but not beyond the viewport size.

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