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.
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;
}
Try this:
img{
width: 100%;
height: auto;
display: block;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.