如何使我的网站上的标题图片具有响应性？

Question

My header pic looks blurry when I resize the screen so how can I fix this? The height is 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

If your original image is proper and has the desired dimension, try the following code. Generally, banner images are provided as background. There are ways of using them using HTML, but I will provide you a simpler way of achieving the same result.

.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>