Center reponsive image inside a div

Question

I'm attempting to center an image wrapped by an anchor tag inside a div. I've attempted to use display flexbox and justify-content:center the image which works to an extent, but The height of the image remains the same whilst the width changes accordingly, so squashes the image as I scale down from desktop to mobile... thus losing its quality.

How can I center this image.

Note: I'm using bourbon neat

Here's what I have

HTML

<div class="project">
  <a class="project__thumb" href="{{ project.url }}" target="_blank">
   <img src="{{ site.baseurl }}img/{{ project.thumbnail }}">
  </a>
</div>

SCSS

.project{
    width: 80%;
    margin: 0 auto; /*center whole block for mobile*/
    height: auto;
    margin-bottom: 60px;
    border-radius: 2px;
    position: relative;

    a{
      display: flex;
      justify-content: center;
    }

    img{
        max-width: 100%; /*make image responsive*/
        height: auto; /*make image responsive*/
        border-radius: 2px;
        transition: opacity 0.25s ease-in-out;
    }
}

@include media ($tablet){
    .main__projects{
        @include span-columns(12);
    }

    .project{
        @include span-columns(6 of 12);
        @include omega(2n);
        margin-bottom: 50px;
    }
}

@include media ($desktop){
    .main__projects{
        @include span-columns(12);
    }

    .project{
      @include span-columns(4 of 12);
      @include omega(3n);
        margin-bottom: 100px;
    }

}

The height of the image remains the same whilst the width changes accordingly. Causing the image to become condensed and squashed... even though I've made it responsive. — Samuel, Mar 20 '17 at 19:06

score 1 · Accepted Answer · answered Mar 20 '17 at 19:16

There are a couple issues going on here. The first issue is that you are using the wrong comments for CSS. For CSS you need to wrap comments with /* */. // is used to comment JavaScript. Because you're using Javascript comments, the height and border-radius properties of the img are being ignored.

The other issue is the use of display:flex; on the anchor tag, this will prevent the responsive image sizing from taking place. This should get you started:

.project{
    width: 80%;
    margin: 0 auto; /* center whole block for mobile */
    height: auto;
    margin-bottom: 60px;
    border-radius: 2px;
    position: relative;
    text-align:center;
}
    .project a {
      display:inline-block;
    }  
    .project img{
        max-width: 100%; /* make image responsive */
        height: auto; /* make image responsive - THIS IS NOT NECESSARY */
        border-radius: 2px;
        transition: opacity 0.25s ease-in-out;
    }

<div class="project">
  <a class="project__thumb" href="{{ project.url }}" target="_blank">
   <img src="http://placehold.it/250x250">
  </a>
</div>

This seems to have worked. I initially tried text-align but it didn't work either? Why remove `height:auto`? — Samuel, Mar 20 '17 at 19:40
@samsos `auto` is the default height value. You'd only need this if some other CSS was overwriting it. — Brian Glaz, Mar 20 '17 at 19:47
@APAD1 1 more question. What if I want to align vertically and horizontally. Surely flex option is suitable — Samuel, Mar 21 '17 at 00:45

Center reponsive image inside a div

1 Answers1