Как уменьшить логотип?

Question

я только начал учится верстать. Подскажите пожалуйста как уменьшить логотип, я его добавил в png, а он большой что то

Answer 1

width:200px; //Длина
height: 50px; //Высота

Answer 2

Соблюдайте Aspect-ratio

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

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_img_width

Answer 3

На будущее лучше бы посмотреть какой нибудь курс по верстке и по схеме учить, а так немного кода за вас напишу)

body {
   width: 100%;
   height: 100%;
   background-image: url("..img/background.jpg");
   background-color: #c7b39b;
}

html, body {
   overflow-x: hidden;
   max-width: 100%;
}

*, *::before, *::after {
   box-sizing: border-box;

   /* Сбрасываем все отступы у элементов(жестко, но на первых порах ок) */
   margin: 0;
   padding: 0;
}

.logo {
   margin-top: 40px;
   margin-bottom: 40px;

   /* ставим размеры для логотипа */
   width: 100px;
   height: 30px;

   /* вписываем png картинку в размеры, если получится поставить svg формат можно и убрать :) */
   object-fit: cover; /* Будёт плохо смотреться поставить contain */
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Merkury</title>
   <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <!-- Стили в боди не пишут, а пишутся если хочешь в head, но все-таки лучше в стилях! -->
   <header> <!-- Вообще хедер на сайте странный можно и его кильнуть -->
      <div class="nav-bar"> <!-- по сути не нужная обёртка -->
         <div class="logo"> <!-- Лучше сделать ссылкой на главную страницу -->
            <img src="img/Logo.png" alt="logo"> <!-- alt не дает описание что за компания и чем занимаеться (PS: иконки делать иконками в svg) -->
         </div>
      </div>
   </header>
</body>
</html>

БЛОГ НА HUSL

Как уменьшить логотип?

Ответы (3 шт):