Положение элемента в CSS - отзывчивый

Проблема в том, что я не могу переместить изображение после элемента панели навигации. Я работал над адаптивными изображениями, на самом деле с масштабированием все в порядке, но когда я просматриваю веб-сайт в режиме телефона, половина изображения отображается под панелью навигации. Я пробовал использовать position: relative; и «верхняя» собственность. Я до сих пор не понимаю, как работает @media screen.

html {
  scroll-behavior: smooth;
}

*,
 ::after,
 ::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: grey;
  color: black;
  line-height: 1.5;
  font-size: 1.2em;
}

.carousel img {
  width: 100%;
  height: auto;
  background-size: cover;
  -moz-background-size: cover;
  background-position: center;
}

nav {
  background: white;
  padding: 1rem 1.5rem;
  color: black;
  z-index: 10;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

.logo2 {
  font-size: 3.3em;
  font-family: "Microsoft JhengHei UI";
  color: rgb(0, 0, 0);
}

@media screen and (min-width: 800px) {
  nav {
    background: transparent;
  }
  .nav-center {
    width: 90vw;
    max-width: 1300px;
    margin-left: 0;
    margin-right: 0;
    display: flex;
  }
}

<header id = "home">
  <!-- navbar -->
  <nav id = "nav">
    <div class = "nav-center">
      <!-- nav header -->
      <div class = "nav-header">
        <a href = "index.html" class = "logo2">name</a>
      </div>
      <!-- links -->
      <div class = "links-container">
        <ul class = "links">
          <li>
            <a href = "route.html">route</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- banner -->
  <div class = "carousel">
    <img src = "css/main_2.jpg" alt = "">

    <div class = "txt_box">
    </div>
  </div>
</header>

@mediascreen легко понять. Условие сообщает, когда будут применяться стили внутри него. В вашем примере стили nav{} и .nav-center{} будут применяться при использовании ширины экрана min: 800px. Вы можете увидеть разницу, когда откроете инструменты разработчика (F12) в своем браузере и найдете кнопку Toggle device toolbar.

— 30.03.2021 22:47

html css

30.03.2021 22:25

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 1

Я решил проблему

.carousel img{
    object-fit: cover;
    width: 100vw;
    height: 100%; 
    margin-top: 112px;
}

@media screen and (min-width: 1059px) {

  .carousel img{
    margin-top: 0px;
}

html {
  scroll-behavior: smooth;
}

*,
 ::after,
 ::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: grey;
  color: black;
  line-height: 1.5;
  font-size: 1.2em;
}

.carousel img {
  width: 100%;
  height: auto;
  background-size: cover;
  -moz-background-size: cover;
  background-position: center;
}

nav {
  background: white;
  padding: 1rem 1.5rem;
  color: black;
  z-index: 10;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

.logo2 {
  font-size: 3.3em;
  font-family: "Microsoft JhengHei UI";
  color: rgb(0, 0, 0);
}

@media screen and (min-width: 800px) {
  nav {
    background: transparent;
  }
  .nav-center {
    width: 90vw;
    max-width: 1300px;
    margin-left: 0;
    margin-right: 0;
    display: flex;
  }
}

<header id = "home">
  <!-- navbar -->
  <nav id = "nav">
    <div class = "nav-center">
      <!-- nav header -->
      <div class = "nav-header">
        <a href = "index.html" class = "logo2">name</a>
      </div>
      <!-- links -->
      <div class = "links-container">
        <ul class = "links">
          <li>
            <a href = "route.html">route</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- banner -->
  <div class = "carousel">
    <img src = "css/main_2.jpg" alt = "">

    <div class = "txt_box">
    </div>
  </div>
</header>

31.03.2021 00:13

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

Таблица стилей оболочки Gnome

Картинка PNG с большими прозрачными сторонами, которые мне не нужны

Проблема с установкой переменной как CSS-анимации в Firefox

Как разместить значки списков на одинаковой высоте?

Как заставить модальное окно открываться, свернувшись слева, и закрыть, развернувшись влево?

Удалите значок HTML, если в теге <img> нет изображения

Переопределить плагин CSS с помощью настраиваемого плагина

SeleniumScript для идентификации элемента css

Transform rotate () не работает должным образом в Firefox

<input type = "number"> теперь не отображает цифровую клавиатуру в Safari

Положение элемента в CSS - отзывчивый

Ответы 1

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

Похожие вопросы