垂直对齐不同高度的图像 React Slick

333 阅读1分钟

我不知道如何在移动版的React Slick slider中垂直对齐图片。总是16:9的图片(垂直图片)在div的上面,但我想让它们在div的中间(就像箭头的位置)。

jsx文件

return (
      <div className="galerija-container">
        <div className="grupa">
          <h2>Lavanda</h2>
          <Slider
            {...settings}
            style={{
              display: "flex",
            }}
          >
            {lavanda.map((item, index) => (
              <div key={index} className="slike">
                <img src={item.slika} alt="" />
              </div>
            ))}
          </Slider>
        </div>

      </div>
    ); 

scss文件。

.galerija-container {
  width: 95%;
  margin: 20px auto;
  & .grupa {
    background-color: var(--lightorange);
    border-radius: 15px;
    padding: 10px;
    height: 450px;
    margin: 40px 0;
    & h2 {
      text-align: center;
      font-size: 2.5rem;
    }
    & img {
      max-height: 350px;
      max-width: 100%;
      padding: 5px;
      border-radius: 30px;
      margin: 0 auto;
    }
  }
  & .arrow {
    font-size: 50px;
    padding: 5px;
    cursor: pointer;
    color: var(--lightgrey);
    height: 350px;
    display: flex;
    align-items: center;
  }
}