Блог

Главная - Вопросы по программированию - Почему размеры изображений в Chrome и Firefox разные

Почему размеры изображений в Chrome и Firefox разные

#css #google-chrome #firefox #flexbox

#css #google-chrome #firefox #flexbox

Вопрос:

Я работал над своим личным портфолио и разрабатывал Firefox. Существует раздел навыков, который был оформлен с использованием flexbox, который содержит логотип и его название

 .abilities-flex-container{
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.abilities-flex-paragraph{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 7rem;
  max-height: 5rem;
}  
 <div class="abilities-flex-container">
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/480px-HTML5_logo_and_wordmark.svg.png" alt="HTML5" class="img-fluid">HTML5
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/340px-CSS3_logo_and_wordmark.svg.png" alt="CSS3" class="img-fluid">CSS
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/128px-Unofficial_JavaScript_logo_2.svg.png" alt="Javascript" class="img-fluid">JavaScript
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/128px-Octicons-database.svg.png" alt="SQL" class="img-fluid">SQL
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/getbootstrap-icon.svg" alt="Bootstrap" class="img-fluid">Bootstrap
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/jquery-icon.svg" alt="jQuery" class="img-fluid">jQuery
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/dotnet-icon.svg" alt="ASP.NET" class="img-fluid">ASP.NET
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/java-icon.svg" alt="Java" class="img-fluid">Java
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/200px-C_Sharp_logo.svg.png" alt="C#" class="img-fluid">C#
    </p>
    <p class="abilities-flex-paragraph">
        <img src="Images/Icons/128px-ISO_C  _Logo.svg.png" alt="C/C  " class="img-fluid">C/C  
    </p>
</div>

Моя проблема в том, что в Firefox изображения не превышают максимальную высоту 5rem, но в Chrome они превышают. Не тестировал это в других браузерах, и я в тупике. Вы можете увидеть это в моем портфолио, если проверите его

Ответ №1:

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

 abilities-flex-paragraph > img {
    max-width: 5rem;
}

Надеюсь, это сработает.

Ответ №2:

я исправил это

 .abilities-flex-paragraph > img {
max-width: 5rem;

}

получилось