在 div 内居中响应图像

Question

我正在尝试将由锚标记包裹的图像置于 div 中。我尝试使用 display flexbox 和 justify-content:center 在一定程度上起作用的图像，但是图像的高度保持不变，而宽度相应地发生变化，因此当我从桌面缩小到移动设备时压缩图像。 .. 从而失去其质量。

如何让这张图片居中。

注意：我用的是纯波旁威士忌

这是我的

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;
    }

}

Answer 1

这里有几个问题。第一个问题是您对 CSS 使用了错误的注释。对于 CSS，您需要用 /* */ 包裹注释。 //用于注释JavaScript。因为您正在使用 Javascript 评论，所以 img 的 height 和 border-radius 属性将被忽略。

另一个问题是在锚标记上使用 display:flex;，这将阻止响应式图像大小调整。这应该让你开始：

.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>

在 div 内居中响应图像

Center reponsive image inside a div

css

html

centering

neat