如何在div中向上移動影像以便裁剪頂部而不是底部？-有解無憂

我有一個包含影像的 div，該影像已擴展為適合整個頁面的寬度和大部分頁面的高度。

.mainarea {
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.sliderarea {
  border: 0px solid red;
  width: 605%;
  height: 80vh;
}

.slideimg {
  width: 16.5%;
  height: auto;
}

.imagetext {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 30%;
  left: 50%;
  color: white;
}

<div class="mainarea">
  <div class="layer"></div>

  <div class="imagetext">
    <h1>Slogan</h1>
    <button>Place An Order</button>
  </div>


  <div class="sliderarea">

    <img class="slideimg" id="pizza" src="https://th.bing.com/th/id/R.64e63c78f7cf2b463e5b89e72162cfc2?rik=JartPjLCg6Q8+w&pid=ImgRaw&r=0">
  </div>
</div>

這是一系列將從側面滑入的影像。現在雖然我主要關注第一張圖片。問題在于，通過擴展影像，它會自動縮放，以便現在裁剪影像的底部。有沒有辦法讓我向上推它以便頂部被裁剪/隱藏，我可以看到底部。（我嘗試使用 object-position: 0 -50%；但這沒有用。）

uj5u.com熱心網友回復：

.mainarea {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}
.sliderarea {
    border: 0px solid red;
    width: 605%;
    height: 80vh;
}

.slideimg {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
}
.imagetext {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 30%;
    left: 50%;
    color: white;
}

<div class="mainarea">
<div class="layer"></div>

<div class="sliderarea">

  <img class="slideimg" id="pizza" src="https://th.bing.com/th/id/R.64e63c78f7cf2b463e5b89e72162cfc2?rik=JartPjLCg6Q8+w&pid=ImgRaw&r=0">
</div>

<div class="imagetext">
  <h1>Slogan</h1>
  <button>Place An Order</button>
</div>
</div>
</div>

uj5u.com熱心網友回復：

你可以試試object-position: 0 -200px;。

在這里，您將 Y 位置偏移負 200 像素。

對于此解決方案，您需要使用媒體查詢來調整不同解析度的偏移量。

編輯：另一個解決方案是換出背景影像的影像標簽并調整background-position值，如下所示：

.slideimg {
  background-image: url('https://th.bing.com/th/id/R.64e63c78f7cf2b463e5b89e72162cfc2?rik=JartPjLCg6Q8+w&pid=ImgRaw&r=0');
  height: 80vh;
  background-position: center center;
  /* possible values (x,y): center left right bottom top*/
}

.imagetext {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 30%;
  left: 50%;
  color: white;
}

<div class="mainarea">
  <div class="layer"></div>

  <div class="sliderarea">
    <div class="sliderarea">
      <div class="slideimg" id="pizza"></div>
    </div>

    <div class="imagetext">
      <h1>Slogan</h1>
      <button>Place An Order</button>
    </div>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/385340.html

標籤：html css

上一篇：Rmarkdown將自定義div添加到目錄

下一篇：如果有帶有影像的div標簽，如何使border-radius起作用