离子网格：将图像居中于列

Question

I am using Ionic grid to create a menu for my application. The problem is the size of the images does not change, and they are not centered inside the columns.

Here is my code:

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

Thank you.

Answer 1

Try following CSS.

.col {
   margin: auto;
}

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

Or simply,

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

Answer 2

Try this:

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