圖片上的媒體查詢

我想將 main 轉換為display:columnwhen max-width:1220px。我正在做這個

@media (max-width: 1220px) {
  .main {
    flex-direction: column;
  }

但是當寬度為 1220 像素時，影像就會消失。我做錯了什么？

這是代碼筆鏈接，更容易。

https://codepen.io/Rvssco/pen/LYzGYgV

先感謝您！

uj5u.com熱心網友回復：

影像正在消失，因為您在 CSS 中包含了影像的 src 而不是 html，flex-direction 在改變方向時無法檢測到影像的存在，因此影像不會出現。你可以看到我的代碼是如何完成的。

body {
  background-color: hsl(233, 47%, 7%);
  color: white;
}

h1,
p {
  margin: 0;
}

h1 {
  font-family: "Lexend Deca", sans-serif;
}

.desc {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: hsla(0, 0%, 100%, 0.75);
}

span {
  color: hsl(277, 64%, 61%);
}

.wrap {
  height: 98vh;
  width: 98vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main {
  display: flex;
  width: 85%;
  height: 80%uto;
  border-radius: 10px;
  background-color: hsl(244, 38%, 16%);
  flex-direction: row;
}

.left {
  padding: 5rem;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  width: 50%;
}

.text-container .title {
  margin-bottom: 2rem;
  font-size: 2.5rem;
  font-weight: 600;
}

.desc {
  margin-bottom: 5rem;
  line-height: 1.5rem;
  word-spacing: 0.3rem;
  font-family: "Inter", sans-serif;
}

.stats-desc {
  font-family: "Inter", sans-serif;
  color: hsla(0, 0%, 100%, 0.6);
}

.stats-container {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  width: 70%;
}

.right {
  width: 50%;
  /* background-image: url(./1.png); */
  background-size: cover;
  background-repeat: no-repeat;
}

.stats h1 {
  font-family: "Inter", sans-serif;
}

.filter {
  height: 100%;
  width: 100%;
  background-color: hsla(277, 88%, 32%, 0.603);
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}



  .left {
    text-align: center;
  }


@media (max-width: 1000px) {
  .main {
    /* display: block; */  /* Option 2*/
    flex-direction: column-reverse;
    background-color:red;  /*Used for testing please remove*/
  }

  .left {
    text-align: center;
  }

/*Small modification in filer and right classes*/
  .filter {
  height: 100%;
  width: 100%;
  background-color: hsla(277, 88%, 32%, 0.603);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

  .right {
  height: 50%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
} 

<div class="wrap">
      <div class="main" role="main" >
        <div class="left">
          <div class="text-container">
            <h1 class="title">
              Get <span>insights</span> that help your business grow.
            </h1>
          </div>
          <p class="desc">
            Discover the benefits of data analytics and make better decisions
            regarding revenue, customer experience, and overall efficiency.
          </p>
          <div class="stats-container">
            <div class="stats">
              <h1>10k </h1>
              <p class="stats-desc">COMPANIES</p>
            </div>
            <div class="stats">
              <h1>314</h1>
              <p class="stats-desc">TEMPLATES</p>
            </div>
            <div class="stats">
              <h1>12M </h1>
              <p class="stats-desc">QUERIES</p>
            </div>
          </div>
        </div>
        <div class="right">
            <img  class="filter" src= ./1.png>
        </div>
      </div>
    </div>

我不知道這背后的確切原因，可能有更深入知識的人能夠發表評論。

如果您仍然想使用 CSS 中的 url，您仍然可以使用它，但要更改

flex-direction:column 

做

diplay:block

其次，當您使用媒體查詢時，您需要重新定義用于影像及其顯示的類（.filter 和 .right）。否則更改將不會應用于它們，這是我觀察到的一個明顯錯誤。

此外，您重新定義了媒體查詢兩次，并且在使用 {} 括號時 CSS 中存在錯誤。

標籤：html css 图片 媒体查询

上一篇：將影像添加到陣列

下一篇：背景影像未在React中顯示