Win a copy of Rust Web Development this week in the Other Languages forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
  • Tim Cooke
  • Campbell Ritchie
  • Ron McLeod
  • Liutauras Vilda
  • Jeanne Boyarsky
  • Junilu Lacar
  • Rob Spoor
  • Paul Clapham
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Jesse Silverman
  • Stephan van Hulst
  • Carey Brown
  • Al Hobbs
  • Piet Souris
  • Frits Walraven

Better way to resize an image with a container using CSS?

Posts: 10
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
So, I'm making a website.  The website should have a container "div" where content can be added.  The content that is added should be imagery; however, I would like to have a very simple system for doing so: measured from the top left corner of both the images and the container, images are places a certain percentage of the container vertically and horizontally.  There would be no flow control whatsoever.  Aspect ratio should be preserved through any resizing, and any part of the image that overflows the container should be hidden.  

I could NOT, however, find a proper combination CSS settings that allow me to do this.  Instead, I did this:

and I paired it with CSS that looks like this:

Hmm, does anyone know of an easier way to attempt this?  I haven't tested this super thoroughly yet either, I admit, but I'm not sure I'm on the right approach.
Consider Paul's rocket mass heater.
    Bookmark Topic Watch Topic
  • New Topic