Megan Taylor

front-end dev, volunteacher, news & data junkie, bibliophile, Flyers fan, sci-fi geek and kitteh servant

Scale and Center Image in Container

I knew how to do this with a background image, but was really struggling with this earlier today until I found this CodePen.

@import "compass/css3";

body, html {
  width: 100%;
  height: 100%;
  @include box-sizing(border-box);
}

body {
  padding: 1em;
  background: #3498db;
}

section {
  width: 50%;
  height: 15em;
  margin: 0 auto;
  overflow: hidden;
  background: #2980b9;
  @include border-radius(.5em);
  
  img {
    position: relative;
    max-height: 100%;
    left: 50%;
    @include translateX(-50%);
    
    @media(min-width: 800px) {
      top: 50%;
      left: 0;
      max-height: none;
      width: 100%;
      @include translateY(-50%);
    }
  }
}

See the Pen Vertically center image within responsive container by Trevan Hetzel (@trevanhetzel) on CodePen.

August 4, 2015 | Comments Off on Scale and Center Image in Container | Categories: Posts | Permalink

Comments are closed.

%d bloggers like this: