如何使我的網站上的標題圖片具有響應性？

Question

當我調整屏幕大小時，我的標題圖片看起來很模糊，我該如何解決這個問題？ 高度為 300px。

 .headerpic { width: 100%; max-width: 100%; height: auto; opacity: 0.8; webkit-transform: scaleX(-1); transform: scaleX(-1); background-repeat: no-repeat; background-attachment: fixed; background-position: center; -moz-background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-size: cover; margin: 0 auto; max-height: 300px; }

 <div class="header"> <img class="headerpic" src="via.placeholder.com/1914x540 " alt="English header" sizes="(max-width: 480px) 100vw"> <div class="title"> <h1>English</h1> </div> </div>

Answer 1

如果您的原始圖像是正確的並且具有所需的尺寸，請嘗試以下代碼。 通常，橫幅圖像作為背景提供。 有多種使用 HTML 的方法，但我將為您提供一種更簡單的方法來實現相同的結果。

.header {
  height: auto;
  min-height: 200px;
  max-height: 300px;
  /*Note - If the image doesn't appear, try correcting its path as per your project setup */
  background: center url('images/header.jpg') no-repeat;
  background-size: cover;
  /* background-attachment: fixed; // not required */
}

<div class="header">
  <!-- <img class="headerpic" src="images/header.jpg" alt="English header"/> -->
  <div class="title">
    <h1>English</h1>
  </div>
</div>