Как предотвратить автоматическое изменение размера изображения на ионной карте

Question

Я работаю над проектом, и мне просто нужно создать меню навигации такого типа на главной странице моего приложения.

Но если я использую изображение в формате png для карты, которая получает автоматический зум и выглядит ужасно. Вот о чем я говорю

Этот значок новостей png представляет собой изображение размером 50 пикселей. Я хочу отобразить это как маленький значок. Я не использую значок, предоставленный ионами, потому что у них очень ограниченный список иконок. Для этого я использовал другой значок. Если я использую ионные иконки, как я могу изменить их размер, как я хочу?

Вот мои коды

<ion-content padding id="myPage">
        <ion-grid>
            <ion-row>
                <ion-col col-6>
                    <ion-card color="secondary">
                        <img src="../../assets/imgs/News_50px.png" class="" alt="" />
                        <ion-card-content text-center>NEWS</ion-card-content>
                    </ion-card>
                </ion-col>
                <ion-col col-6>
                    <ion-card>
                        <img src="../../assets/icon/icons8-handshake-96.png" class="" alt="" />
                        <ion-card-content>
                        </ion-card-content>
                    </ion-card>
                </ion-col>
            </ion-row>
        </ion-grid>
    </ion-content>

Что я могу сделать для того, чтобы мое приложение выглядело так, как указано выше? Я упомянул внешний вид приложения, и могу ли я изменить размеры и ширину карты по своему желанию?

Answer 1

Если вы идете со своим PNG, просто используйте CSS.

Например:

ion-card img { width: 20%; height: 20%; }

Для этого приложения изображения должны иметь одинаковую начальную ширину и высоту, в противном случае вам нужно сделать это с пользовательским классом для каждого изображения и указать нужный вам размер.

Если вы хотите использовать ионные значки, вы можете присвоить им другой размер с размером шрифта, например 1,5em. Затем вы можете проверить размер окна и изменить его размер в CSS. Если ширина> 800 пикселей, размер шрифта: 1,8em и т. Д. (https://www.w3schools.com/css/css_rwd_mediaqueries.asp)