イオングリッド：画像を列の中心に合わせる

Question

私は、アプリケーションのメニューを作成するためにイオングリッドを使用しています。 問題は、イメージのサイズが変更されず、列の中央に表示されないことです。ここで

私のコードです：

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