printプロパティで、imgが幅いっぱいに広げたい

Question

printプロパティで、imgが幅いっぱいに広がりません。

右側に余白ができてしまいます。
この余白をなくしたいです。

現在のコードは下記のようになっています。

  <!-- header -->
  <header class="header">
    <div class="header-inner">
      <h1 class="site-title"><a href="./">Cresta Design</a></h1> 
      <nav class="header-nav">
        <ul class="nav-list">
          <li class="nav-item"><a href="#">Concept</a></li>
          <li class="nav-item"><a href="#">Service</a></li>
          <li class="nav-item"><a href="#">Works</a></li>
          <li class="nav-item"><a href="#">Contact</a></li>
        </ul>
      </nav>
      <button class="burger-btn">
        <span class="bar bar_top"></span>
        <span class="bar bar_mid"></span>
        <span class="bar bar_bottom"></span>
      </button>
    </div>
  </header>
  <!-- //header -->

  <!-- main -->
  <main>
    <!-- fv -->
    <div class="fv" id="fv">
      <ul class="slider">
        <li><img src="./img/[e-mail]"></li>
        <li><img src="./img/[e-mail]"></li>
        <li><img src="./img/[e-mail]"></li>
      </ul>
      <div class="main-copy">
        <p class="en-copy">Design for Smile.</p>
        <p class="jp-copy">快適なオフィスを<br class="sp-br">デザインする</p>
      </div>
    </div>
    <!-- //fv -->

/* 印刷プレビュー */
@media print {
  #fv{
    page-break-after: always;
  }
  #concept{
    page-break-after: always;
  }
  #works{
    page-break-after: always;
  }
  #service{
    page-break-after: always;
  }
  body {
    zoom: 0.78;
    -webkit-print-color-adjust: exact;
  }
}


/* ------------------- */
/* header */
/* ------------------- */
.header{
  padding: 19px 30px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  transition: .3s;
}
.header-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.header a{
  color: #fff;
  text-decoration: none;
  transition: .3s;
  font-weight: bold;
  font-style: italic;
}
.header a:hover{
  opacity: .7;
  transition: .3s;
}
.site-title{
  font-size: 2.6rem;
}
.nav-list{
  display: flex;
}
.nav-item{
  margin-right: 30px;
}
.nav-item:last-of-type{
  margin-right: 0;
}
.burger-btn{
  display: none;
}
.header.fixed{
  position: fixed;
  background-color: #282f35;
  padding: 30px;
  width: 100%;
  transition: .3s;
}

/* ------------------- */
/* first view */
/* ------------------- */
.fv{
  height: 100vh;
  min-height: 550px;
  position: relative;
  background-size: cover;
  background-position: center;
}
.fv img{
  height: 100vh;
  min-height: 550px;
  object-fit: cover;
}
.main-copy{
  position: absolute;
  left: 120px;
  bottom: 177px;
  color: #fff;
  font-weight: bold;
}
.en-copy{
  font-size: 7rem;
  margin-bottom: 31px;
}
.jp-copy{
  font-size:4rem;
  text-align: center;
}
.slick-arrow{
  display: none !important;

}

/* 印刷プレビュー */
@media print {のところで、どのようにコードを書いたら、
印刷時に、画像のような余白をなくせますか？教えてください。

Answer 1

大本のリセット系のCSSや、
スライドのCSSやJSがわからないので、なんとも言えないですが、
こんな感じでいかがでしょうか？

@media print {
  .fv{
    height:auto;
    min-height:0;
  }
  .fv img{
    height: auto;
    min-height: 0;
    width:100%;
  }
}

原因

おそらく、.fv imgにかけているobject-fit: cover;が
ちゃんと動いてないと思います。