0

How do you resize an image (using plain old HTML and CSS - no JavaScript) so that it fills a given size even if some of the image is lost?

Essentially what I'm looking for is Aspect Fill on iOS.

i.e. if IMAGE is too wide, you'd just see what's between the square brackets below:

IM[AG]E

i.e. AG. The same would happen if it was too high.

E.g. assuming I'm using something like this: <img src="" />

Snowcrash
  • 80,579
  • 89
  • 266
  • 376

1 Answers1

0

What you can do is to show the image as the background of an element, for instance:

<div style="width: 300px; height: 200px; background: transparent url('image.png') no-repeat 50% 50%;"></div>
Joel Fernandes
  • 1
  • 3