Как заставить изображение заголовка быть отзывчивым и не двигаться вниз - PullRequest
Новая
       0

Как заставить изображение заголовка быть отзывчивым и не двигаться вниз

0 голосов
/ 03 апреля 2020

Я работал с HTML и CSS очень короткое время и взялся за проект для моей школы. В настоящее время я создаю сайт для нашей художественной ярмарки! Я столкнулся с проблемой, когда при изменении размера вкладки изображение заголовка кажется неправильным. Вы также можете видеть это только правильно, если на экране 1080p.

Мне было интересно, как бы я изменил размер заголовка, чтобы он двигался последовательно при уменьшении / расширении страницы или увеличении / уменьшении разрешения экрана. Я сделал скрипку, чтобы вы могли легко получить доступ к моему коду.

Fiddle: https://jsfiddle.net/Lucasizq/nu7fLr1k/7/

.mainphoto {
  position: absolute;
  padding-top: 50px;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
}

Здесь я думаю, что моя ошибка, но я не уверен.

Ответы [ 2 ]

0 голосов
/ 03 апреля 2020

Я не знаю, что вы пытаетесь поставить как главную фотографию как, lo go или для показа в качестве изображения в контенте, поэтому я добавил его в оба раздела, чтобы вы могли прокомментировать его и сделать так, чтобы вы работали как вы want.

Также вы должны быть осторожны с семантикой html, вы добавляете все в заголовок, в то время как в разделе содержимого / разделе должен быть только nav, а другой - вне его. Вы можете прочитать о html семантике здесь: https://www.w3schools.com/html/html5_semantic_elements.asp

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

@charset "utf-8";

/* CSS Document */

* {
  margin: 0;
  padding: 0;
  font-family: "montserrate", sans-serif;
}

body {
  background-color: #000000;
}

.logo {
  height: 80px;
  width: 100px;
}

header {
  height: 80px;
}

.nav {
  padding: 0 10px;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul {
  float: right;
  list-style-type: none;
  margin: 20px;
}

ul li {
  display: inline-block;
  margin: 10px 5px;
}

ul li a {
  text-decoration: none;
  padding: 8px 20px;
  letter-spacing: 2px;
  color: #D8C7C7;
  border-bottom: 1px solid #D8C7C7;
  transition: 0.6s ease;
}

ul li a:hover {
  background-color: #47b8f7;
  border-bottom: 1px solid #47b8f7;
  color: fff;
}

.content {
  position: relative;
  text-align: center;
  color: #fff;
  /* top: 350px; */
  flex: 1;
}

.content h1 {
  font-size: 52px;
  margin: 25px;
}

.main-photo {
  height: 300px;
  width: 100%;
}

.festival-attraction-menu {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
}

.btn {
  font-size: 18px;
  color: #fff;
  letter-spacing: 2px;
  margin: 5px;
  padding: 7px 28px;
  text-decoration: none;
  border: 2px solid #fff;
  transition: 0.6s ease;
}

.btn1:hover {
  background-color: #47b8f7;
  border: 2px solid #47b8f7;
}

.btn2:hover {
  background-color: #ffe713;
  border: 2px solid #ffe713;
}

.btn3:hover {
  background-color: #ffe713;
  border: 2px solid #ffe713;
}

.btn4:hover {
  background-color: #FF00A9;
  border: 2px solid #FF00A9;
}

@media screen and (max-width:960px) {}

@media screen and (max-width:768px) {}

@media screen and (max-width:480px) {}
<!doctype html>
<html>

<head>
  <title>WWHS Festival of The Arts</title>
  <link rel="stylesheet" type="text/css" href="styleHomepage.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <header class="header-section">
    <div class="nav">
      <img src="https://i.imgur.com/zISS0nU.png" alt="FOA" class="logo">
      <ul>
        <li><a href="#">Home</a></li>
      </ul>
    </div>
  </header>
  <div class="content">
    <img src="https://i.imgur.com/zISS0nU.png" alt="FOA" class="main-photo">
    <h1>FESTIVAL OF THE ARTS</h1>

    <div class="festival-attraction-menu">
      <a href="#" class="btn btn1">Digital Art</a>
      <a href="#" class="btn btn2">Photo</a>
      <a href="#" class="btn btn3">Ceramics</a>
      <a href="#" class="btn btn4">Coffee House</a>
    </div>
  </div>
</body>

</html>
0 голосов
/ 03 апреля 2020

Измените ваши правила на 

.mainphoto{
    position: absolute;
    padding-top: 0;
    top:0;
    right: 0;
    width: 100% ;
    height: auto;
    z-index: -100;
}

, объясняя

Чтобы зафиксировать его сверху

padding-top: 0;

top: 0;

Чтобы заставить img быть отзывчивым внутри контейнера отцов

ширина: 100%

Для сохранения одинакового соотношения сторон (не для уменьшения изображения)

высота: авто;

наконечник

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

проверьте это: https://jsfiddle.net/u6fg1v2t/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...