Я пытаюсь разместить изображение в левой части панели навигации, используя только чистый 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 навигационных ссылки, состоящих из одного слова, справа. Я понимаю, как создать навигационные ссылки и расположить все дочерние элементы контейнера рядом, но я не могу понять, как сделать изображение меньше и в фиксированном положении на панели навигации.
Угадайте, что я в основном спрашиваю, как заставить изображение соответствовать контейнеру и как даже сделать для него правильный контейнер. Спасибо!
Для этого вы можете использовать свойство object-fit
. Просто задайте полную высоту и ширину своему изображению и заставьте изображение содержать его родителя.
img {
width: 100%;
height: 100%;
object-fit: contain;
}
Обновлено: Вы можете узнать больше об этом свойстве на этой странице.
Если контейнером 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>
Попробовав другие варианты, я решил, что это лучшее решение. Большое спасибо !
.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>
хорошее начало, однако вы должны исправить проблему переполнения и попробовать ее без реструктуризации HTML (особенно без упоминания об этом), что легко возможно.