Как изменить высоту и ширину изображения в теге <i>с помощью CSS? - PullRequest
Новая
       1

Как изменить высоту и ширину изображения в теге <i>с помощью CSS?

0 голосов
/ 22 марта 2020

Я хотел бы изменить высоту и ширину флагов в теге <i>.

Изображения флагов отображаются правильно.

Однако я хотел бы изменить размер их, так как они довольно маленькие, которые не работают.

Я был бы очень признателен за любую помощь.

Этот пример от: https://mdbootstrap.com/docs/jquery/content/flag/

<!DOCTYPE html>
<html>
    <head>
        <link href="flag.min.css" rel="stylesheet">
        <style>
            i {
                width: 150px;
                height: 100px;
            }

            #flag {
                height: 150px;
                width: 100px;
            }
        </style>
    </head>
    <body>
        <div id="flag">
            <i class="ae flag"></i>
        </div>
        <i class="france flag"></i>
        <i class="myanmar flag"></i>
    </body>
</html>

Ответы [ 2 ]

0 голосов
/ 22 марта 2020

Спасибо всем, кто внес свой вклад и помог мне многому научиться.

Со всей информацией, предоставленной полезным сообществом, для меня лучше всего подойдет следующее решение:

CSS : 

.a1{

  border-radius: 5px;
  width: 120px;
  height: 90px;
}

.b1{
  border-radius: 4px;
  width: 32px;
  height: 24px;
}

HTML: 

<img class="a1" src="https://lipis.github.io/flag-icon-css/flags/4x3/gb.svg">
<img class="b1" src="https://lipis.github.io/flag-icon-css/flags/4x3/pk.svg">

Поскольку я ссылаюсь на SVG, я могу легко увеличить его, не беспокоясь о размытости или пикселях.

Еще раз спасибо за всех, кто помог.

0 голосов
/ 22 марта 2020

Вы не можете изменить размеры иконок Md bootstrap. Я видел ссылку, которую вы указали в вопросе; Вы должны прочитать раздел типов на этой странице, они отметили, что вы не можете изменить размер значка.

this page

Решение для этого Вы должны использовать изображение флага и предоставить ссылку на изображение с тегом привязки. 

 <a href="#">
 <img  src="image.jpeg" height="30" width="30" alt=""/>
 </a>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...