离子网格:将图像居中到列

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

Answer 2

试试这个：

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