Добавление изображения на панель навигации с помощью html и css

Я пытаюсь разместить изображение в левой части панели навигации, используя только чистый html и css. До сих пор я не делал настоящие навигационные ссылки, но вот что у меня есть:

.container {
  max-width: 1100px;
  margin: 0 auto;
  overflow: auto;
  padding: 0 40px;
}

img {
  width: 100%;
}

.nav_class {
  height: 80px;
}
<header id = "header">
  <div class = "container nav_class">
    <img id = "header-img" src = "https://odysseeservice.com/wp-content/uploads/2016/12/Microsoft-Dynamics-NAV-Logo.png" alt = "">
    <nav id = "nav-bar">
      <ul>
        <li class = "nav-link"></li>
        <li class = "nav-link"></li>
        <li class = "nav-link"></li>
      </ul>
    </nav>
  </div>
</header>

Я бы не хотел, чтобы он был больше 80 пикселей в высоту. Только изображение слева и 3 навигационных ссылки, состоящих из одного слова, справа. Я понимаю, как создать навигационные ссылки и расположить все дочерние элементы контейнера рядом, но я не могу понять, как сделать изображение меньше и в фиксированном положении на панели навигации.

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
3 669
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Для этого вы можете использовать свойство object-fit. Просто задайте полную высоту и ширину своему изображению и заставьте изображение содержать его родителя.

img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

Обновлено: Вы можете узнать больше об этом свойстве на этой странице.

https://www.w3schools.com/css/css3_object-fit.asp

Ответ принят как подходящий

Если контейнером img является 80px, то установка img на height: 100% даст ему высоту 80 пикселей и автоматически масштабирует его. Затем вы можете использовать flexbox, чтобы помочь вам с позиционированием. Что-то вроде этого:

    #nav-bar{
        height: 80px;
        display: flex;
        justify-content: space-between;
    }
    #nav-bar img{
        height: 100%;
    }
    .nav-links{
        display: flex;
    }
    .nav-links li{
        width: 100px;
    }
<header id = "header">
    <nav id = "nav-bar">
        <img id = "header-img" src = "https://odysseeservice.com/wp-content/uploads/2016/12/Microsoft-Dynamics-NAV-Logo.png" alt = "">            
        <ul class = "nav-links">
            <li>A</li>
            <li>A</li>
            <li>A</li>
        </ul>
    </nav>
</header>

хорошее начало, однако вы должны исправить проблему переполнения и попробовать ее без реструктуризации HTML (особенно без упоминания об этом), что легко возможно.

tacoshy 20.12.2020 16:02

Попробовав другие варианты, я решил, что это лучшее решение. Большое спасибо !

DaivarasDev 21.12.2020 18:03
.container {
            max-width: 1100px;
            margin: 0 auto;
            /* overflow: ; */
            padding: 0 40px;
            display:flex;
            flex-direction: row;
            justify-content: space-between ;
        }
        /* that will make image fit */
        img {
            width: 25%;
        }
        /* make the navbar and take every thing inside */
        .nav_class {
            height: 80px;
            overflow: hidden;
        }
        #nav-bar ul{
            margin: 0;
            padding:0;
            display:flex;
            justify-content: space-between;
        }

Я добавил в ваш код CSS:

.container { display: grid; grid-template-columns: min-content auto; }

Эти 2 строки изменяют контейнер заголовка на сетку, где логотип будет занимать столько места, сколько необходимо, без изменения формата размера. Навигационная панель займет все оставшееся место.

Затем я удалил ваш код CSS для изображения и заменил его идентификатором header-img, чтобы не влиять на другие изображения:

#header-img { max-height: 80px; }

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

.container {
  max-width: 1100px;
  margin: 0 auto;
  overflow: auto;
  padding: 0 40px;
  display: grid;
  grid-template-columns: min-content auto;
}

#header-img {
  max-height:80px;
}

.nav_class {
  height: 80px;
}
<header id = "header">
  <div class = "container nav_class">
    <img id = "header-img" src = "https://odysseeservice.com/wp-content/uploads/2016/12/Microsoft-Dynamics-NAV-Logo.png" alt = "">
    <nav id = "nav-bar">
      <ul>
        <li class = "nav-link"></li>
        <li class = "nav-link"></li>
        <li class = "nav-link"></li>
      </ul>
    </nav>
  </div>
</header>

Другие вопросы по теме