html - ionic 网格 : center an image to a column

Question

我正在使用 Ionic 网格为我的应用程序创建菜单。 问题是图像的大小没有改变，并且它们没有在列内居中。

这是我的代码:

<div class="row" style="height: 250px; overflow: visible; ">
            <div class="welcome col col-67" style="overflow: visible; height: 230px;">
                <img src="img/menu/Image1.png" ui-sref="welcome"/>
            </div>
             <div class="jargon col col-33" style="overflow: visible; height: 230px; ">
                <img src="img/menu/Image2.png" ui-sref="jargon"/>
            </div>
        </div>

        <div class="row" style="height: 250px; overflow: visible">

            <div class="tools col col-50" style="overflow: visible; height: 230px; ">
                <img src="img/menu/Image4.png" ui-sref="tools"/>
            </div>
             <div class="values col col-50" style="overflow: visible; height: 230px;">
                <img src="img/menu/Image3.png" ui-sref="values"/>
            </div>
        </div>

谢谢。

Answer 1

尝试遵循 CSS。

.col {
   margin: auto;
}

.col img {
  height: 100%;
  width: auto;
  display: block;
  margin: auto;
}

或者简单地说，

.col img {
  max-height: 100%;
  max-width: 100%;
  display: block;
  margin: auto;
}