Skip to content
  • home
  • portfolio
  • web design journal
  • blog
    • adventure
    • san diego
    • projects
    • website design
Blog Quickbits Completely Fill a Div With an Image

Completely Fill a Div With an Image

By Forrest Smith - Drempd.com

I used to just use a div and set the background image to what I wanted, and then set the background-image properties to cover. This has never actually seemed like a good, semantic way of doing it though, and lazy-loading those images takes a bit more work, and you miss out on some alt tag opportunities. The better way of doing this I guess is to use the object-fit parameter. Set the width and the height of the image to max the wrapper div, and use object fit like so:

.myimage{
    width: 100%;
    height: 200px;
    object-fit: cover;
  }

Posted on June 16, 2022July 6, 2022 in Quickbits
  • Adventure

    • adventure
    • gravelgrinding
    • hiking
    • running
  • The Built Environment

    • architecture
    • urbanity
  • Locations

    • san diego
    • portland
  • Freelance Life

    • freelancing
    • productivity
  • Web Dev

    • css
    • entrepreneurship
    • git
    • handlebars
    • html
    • inkscape
    • photoshop
    • php
    • sass
    • web design
    • web development
    • saphire

drempd | san diego, ca


home contact

adventures san diego urbanity and architecture projects stream website design

portfolio resume san diego web design freelance web designer

custom web design responsive web design website maintenance