将照片添加到列中

Question

我正在尝试将导演的致谢页面创建为新手，并且在对齐列中的照片时遇到问题。首先，我将版式分为两栏，试图在左侧写“信息”，并在右侧插入照片。问题是#best-scenes ID无法正常工作，定义了列间隙，列规则颜色...请查看Chrome中的图像，以查看其外观。我也尝试添加绝对/相对，但没有解决。

谢谢。

body {
  text-align: center;
}

h2 {
  color: #32815b;
}

h1 {
  font-size: 50px;
  color: #08500b;
}

#portrait_image {
  text-align: center;
  height: 300px;
}

#image {
  height: 150px;
  width: 250px;
  object-fit: cover;
  object-position: center;
}

#img-caption {
  font-family: "Nunito Semibold";
  font-size: 10px;
}

#content {
  display: grid;
  grid-template-columns: 30% 70%;
}

#Best-scenes {
  column-count: 2;
  column-rule-color: #e6e6e7;
  column-gap: 20px;
}

<h1 id="title"> Wong Kar Wai </h1>
<div id="img-div">
  <img src="images/wongkarwai_portrait.jpg" alt="Wong Kar Wai Portrait" id="portrait_image">
  <p id="img-caption">
    <em>Portrait of Wong Kar Wai</em> </p>
</div>
<div id="content">
  <div id="tribute-info">
    <p>Wong Kar-wai (born 17 July 1956) is a Hong Kong Second Wave filmmaker, internationally renowned as an auteur for his visually unique, highly stylised, emotionally resonant work, including Ah fei zing zyun (1990), Dung che sai duk (1994), Chung Hing
      sam lam (1994), Do lok tin si (1995), Chun gwong cha sit (1997), 2046 (2004) and My Blueberry Nights (2007), Yi dai zong shi (2013). His film Fa yeung nin wa (2000), starring Maggie Cheung and Tony Leung, garnered widespread critical acclaim. Wong's
      films frequently feature protagonists who yearn for romance in the midst of a knowingly brief life and scenes that can often be described as sketchy, digressive, exhilarating, and containing vivid imagery. Wong was the first Chinese director to
      win the Best Director Award of Cannes Film Festival (for his work Chun gwong cha sit in 1997). Wong was the President of the Jury at the 2006 Cannes Film Festival, which makes him the only Chinese person to preside over the jury at the Cannes Film
      Festival. He was also the President of the Jury at the 63rd Berlin International Film Festival in February 2013. In 2006, Wong accepted the National Order of the Legion of Honour: Knight (Highest Degree) from the French Government. In 2013, Wong
      accepted Order of Arts and Letters: Commander (Highest Degree) by the French Minister of Culture.</p>

  </div>
  <div id="Best-scenes">
    <h2> Best Scenes of Wai </h2>
    <div><img src="images/1.png" alt="Wong Kar Wai Portrait" id="image"></div>
    <div><img src="images/d961eb00-4c74-11e9-8e02-95b31fc3f54a_image_hires_162650.jpg" alt="movie_scene" id="image"></div>
    <div><img src="images/Days-of-Being-Wild.jpg" alt="movie_scene" id="image"></div>
    <div><img src="images/Happy-Together.jpg" alt="movie_scene" id="image"></div>
    <div><img src="images/in_the_mood_for_love.jpg" alt="movie_scene" id="image"></div>
    <div><img src="images/In-The-Mood-For-Love-1.jpg" alt="movie_scene" id="image"></div>
    <div><img src="images/maxresdefault.jpg" alt="movie_scene" id="image"></div>
    <div><img src="images/ndywmhpclyyhznfljwgn.jpg" alt="movie_scene" id="image"></div>
  </div>
</div>

<!-- <div id="footer">
    <a href="https://www.imdb.com/name/nm0939182/bio?ref_=nm_ov_bio_sm" target="_blank" id="tribute-link">
      Learn more about Wong Kar Wai
  </div> -->

Answer 1

您必须添加：

#Best-scenes {
  display: flex;
  flex-direction: column;
}

Answer 2

#image
{
    height: 250px;
    width: 500px;
    object-fit: cover;
    object-position: center;
}

我通过更改列中照片的大小找到了解决方案。但是仍然不明白为什么object-position: center;在这种情况下不起作用。