在反应中调整图像大小并将其拟合到父 div

Question

大家好，我是新来的反应。我正在建立一个网站并完成了大部分工作，但是我遇到了问题。我想在我的 scss 文件夹中编写代码，以便使用给定的大小和高度声明 div 元素，然后声明该 div 的子元素，以便在图像上调用 div 将调整大小并居中以适应宽度和父 div 的高度。所以父 div 指定大小，子元素调整图像大小并居中，我们可以在网站上调用任何我们想要的图像上的子元素来调整图像大小并将图像居中到父 div 的尺寸。

我尝试了类似的东西

.container {
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

然后从名为“_other.scss”的文件中调用

我做到了

<div class='container'>
    <a href='#'>
    <img class='resize_fit_center'
      src='http://i.imgur.com/H9lpVkZ.jpg' />
    </a>
</div>

但这不起作用，特别是如果图像位于其他预先指定的较大容器中。关于如何在“scss”中制作标准文件并在图像上调用它以便在应用图像时可以调整大小并居中到父 div 的大小的任何想法？

Answer 1

图像如您所愿居中。但是为什么要限制容器的宽度呢？

.container {
    margin: 10px;
    width: 115px; // <== remove this line, you will see the image had been centered already.
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

Here is the demo