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>

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

1 个答案: