Position an image in the center of a column using the Ionic grid

I'm currently working on using the Ionic grid to create a menu layout for my app, but I'm facing an issue with the image sizes not adjusting and their alignment inside the columns not being centered. https://i.sstatic.net/yWjCV.png

Below is the code snippet:

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

Your help is greatly appreciated.

htmlcssangularjsionic-framework

Answer №1

Here is some CSS code you can try out:

.col {
   margin: auto;
}

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

Alternatively, you can use this simpler code:

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

Answer №2

Give this a shot:


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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is Angular not functioning properly with nested ng-repeats?

I have utilized nested ng-repeat to iterate through all the values of objects. <tr class="" ng-repeat="(position, values) in chartResult.realData track by $index"> <td> <div ng-click="select(position)" ng-class="{selected: ...

angularjsangularjs-ng-repeat

A guide on transforming a 1-dimensional array into a 2-dimensional matrix layout using Angular

My query revolves around utilizing Template (HTML) within Angular. I am looking for a way to dynamically display an array of objects without permanently converting it. The array consists of objects. kpi: { value: string; header: string; footer: string }[] ...

htmlangulartypescript

Having trouble with individuals gaining access to my gh-pages on Github

After creating a gh-pages repository on Github to showcase my portfolio, I encountered an issue where visitors were being prompted to log into Github in order to view the page. Gh-pages are intended to be public, so I am unsure why this is occurring. My ...

htmlcssgithostinggithub-pages

The footer menu fails to glide upwards

I designed a top menu for my website that includes 2 key features: Sticky navigation bar when scrolling Slide toggle navbar You can view the demo here: JSBIN However, I am facing 2 issues: When the page is at the top and the menu is in its default pos ...

jqueryhtmlcss

Is there a way to create a multi-page website simulation using jQuery?

My current project involves creating a single page website, but I am looking to give the illusion of a multi-page site by using CSS/jQuery to hide and reveal different sections when specific links in the navigation menu are clicked. Here is the code snipp ...

javascriptjqueryhtmlcss

Map on leaflet not showing up

I followed the tutorial at http://leafletjs.com/examples/quick-start/ as instructed. After downloading the css and js files to my local directory, I expected to see a map but all I get is a gray background. Can anyone advise me on what might be missing? T ...

javascriptcssleaflet

Adjust the clarity of the elements within my HTML document

I have been working on creating a login page that will appear in front of the main webpage. Through my online research, I discovered a technique to blur the main webpage background until the user logs in. Below is the code snippet: HTML: <div id="logi ...

javascriptjqueryhtmlcss

Enhanced Firefox functionality with support for multiple columns

It has come to my attention that Internet Explorer 9 and older versions do not support multiple columns. However, even with the latest version of Firefox, I am experiencing issues with this website loading correctly. Do you have any insight into what might ...

cssfirefoxresponsive-designmultiple-columns

Tips for changing the text color to stand out from the color of the input field

My input field undergoes color changes depending on whether it's in dark mode or light mode. However, I'm struggling to maintain a distinct color for the input field border and text. The client prefers a very light border for the input field but ...

cssreactjs

Transitioning between carousel slides will reveal a clean white backdrop

I'm currently facing an issue with my html website. It seems that when I navigate through the carousel slides on my Bootstrap-5 based site, white spaces keep popping up. How can I resolve this issue? Here is a snippet of my code: HTML <!doctype h ...

htmljquerycssbootstrap-5

Different ways to automatically trigger a function in JavaScript

There are various ways to trigger a function automatically in javascript when a page loads. I am interested in knowing which method is considered the most effective and reliable. If you have a unique approach that differs from others, please share it here ...

javascripthtml

What is the best way to preserve the background color of nested progress bars?

In this scenario, I am attempting to apply border-radius specifically to the upper and lower right corners of the progress bars. The idea is to create a cascading effect where each color (red, green, and blue) progress bar overlaps slightly with the next o ...

htmlcssbootstrap-4

"Troubles with directing on websites using jQuery, CSS,

I have been struggling with creating this navigation bar for weeks now and I keep running into issues. What I am attempting to achieve is a primary navigation bar that, when hovered over, displays a secondary navigation menu below and slightly to the righ ...

jqueryhtmlcssnavigation

What are the solutions to repair a triple drop-down menu?

I am struggling with the code below which contains numbers inside the values: What I need is to modify all instances of the following codes: <option value="1" class="sub_1"> To look like this: <option value="" id="1" class="sub_1"> Basical ...

javascriptjqueryhtmlcssajax

Establish the directive upon receiving the broadcast

Is there a way to trigger a directive when a specific event occurs on the backend and sets a value to false?... This is where the event is being captured .factory('AuthInterceptor', function($q, $injector, $rootScope) { return { ...

javascriptangularjs

The Bootstrap 4 navbar remains consistently visible on mobile devices

I am experiencing an issue with my bootstrap navbar on mobile devices. It remains visible even when the navbar-toggler is collapsed. Below is the code snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container"&g ...

htmlcssbootstrap-4ejs

Tips on hovering over information retrieved from JSON data

Within my code, I am extracting information from a JSON file and placing it inside a div: document.getElementById('display_area').innerHTML += "<p>" + jsonData[obj]["name"] + "</p>"; I would like the abi ...

javascripthtmljqueryjson

What could be causing media queries to not update values even after being changed through JavaScript?

I have a simple navigation bar on my website, featuring links to different subpages. To enhance the user experience on mobile devices, I added a hamburger menu icon that is displayed on smaller screens. The links in the navigation bar are hidden using CSS ...

javascripthtmlcssmedia-queries

Tips for creating a unique exception in AngularJS?

I have a customException.js script with the following service: app.service('CustomException', function() { this.CustomException1 = function (message) { if (!message) { message = "Custom Exception 1 occurred!"; } return { ...

javascriptangularjsexception

Show only a cropped section of a resized image within a div

I have a script that calculates the best region of an image to display within a specific div size. This calculation is done in PHP and generates a JSON output like this: {"scale":1.34,"x1":502,"x2":822,"y1":178,"y2":578} The image in question has dimensi ...

javascriptjqueryhtmlcss