Мой образ не будет установлен на меньший размер - PullRequest
Новая
       12

Мой образ не будет установлен на меньший размер

1 голос
/ 02 марта 2020

У меня есть изображение, которое я хочу изменить, чтобы оно вписывалось в <div>, которое находится на моей главной домашней странице, а также в панели навигации вверху, однако независимо от того, что я пытаюсь применить к CSS изображения, ничего не меняется, оно по-прежнему выглядит огромным.

HTML для моего индекса страницы div: 

<div class="row">
    <div class="grid-full containerHomepage">
        <div class="centered">SIGN UP TO HEAD-SMART<a class="noDecoration brain" href="signup.php"> NOW</a>
            <img class="mainLogo" src="images/HeadSmart.png">
        </div>
        <img src="images/homepage2.jpg">
    </div>
</div>

CSS: 

.mainLogo{
  width: 20px;
  height: 20px;
}

HTML для моей панели навигации: 

<nav>
  <!-- https://www.w3schools.com/howto/howto_js_topnav_responsive.asp -->
  <div class="topnav" id="myTopnav">
      <a href="index.php" class="active"><i class="fas fa-home"></i>&nbsp; Home</a>
      <a href="about.php"><i class="fas fa-info-circle"></i>&nbsp; About</a>
      <a href="contact.php"><i class="fas fa-envelope"></i>&nbsp; Contact</a>
      <?php  
        // The below is a small 'if else' statement which depending on whether a user is logged in or not, the menu items will differ
        // If logged in, then show the logout and the dashboard item
        // If not logged in, then show the login and signup button
        if (!isset($_SESSION['studentID'])) {
          echo "<a name='login-submit' href='login.php'><i class='fas fa-sign-in-alt'></i>&nbsp; Login</a>";
          echo "<a href='signup.php'><i class='fas fa-check-square'></i>&nbsp; Sign Up</a>";
        } else if (isset($_SESSION['studentID'])) {
          echo "<a href ='dashboard.php'><i class='fas fa-tachometer-alt'></i>&nbsp; Dashboard</a> ";
          echo "<a name='logout-submit' href='scripts/logout-script.php'><i class='fas fa-sign-out-alt'></i>&nbsp; Logout</a>";
        }
      ?>
      <a href="index.php" class="logo"><i class="fas fa-brain"></i></a>
      <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="menu2Function()">&#9776;</a>
  </div>
</nav>

Размер, который я хотел бы видеть в на панели навигации и на странице указателя (для демонстрации она отображается только с пиктограммой fa): Size I would like my image shown in the navbar and on the index page

Ответы [ 2 ]

2 голосов
/ 02 марта 2020

Вы можете назначить свойства width и height для самого тега изображения, что настоятельно рекомендуется. Это говорит браузеру, насколько большим будет изображение до его загрузки, чтобы он мог подготовить пространство для него. 

<img src="image.jpg" width="20" height="20" />
1 голос
/ 02 марта 2020

Вы должны определить размеры изображения в вашем теге img: 

<img width="20" height="20" src="images/HeadSmart.png">

Значения определяются в программных пикселях (HTML 5) или экране пикселей (HTML 4), поэтому нет необходимости добавлять единицу измерения (например, px в разметке CSS).

Преимущество определения размеров в HTML атрибуты в том, что браузеры могут стилизовать изображение на раннем этапе, даже если файл CSS еще не полностью загружен и обработан. Таким образом вы предотвратите так называемый Fla sh из неустановленного содержимого (FOU C).

...