遮罩 <img/> 不改变高度或位置

Question

我有一个页面here 有一个垂直和水平居中的图像。

body {
  margin: 0px;
  height: 100%;
}

#background {
  z-index: -1000;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#background-img {
  width: calc(100% + 200px);
  height: calc(100% + 200px);
  margin-left: -100px;
  margin-top: -100px;
  filter: blur(50px);
}

#body-container {
  height: 100%;
  display: table;
  width: 100%;
}

#display {
  display: table-cell;
  height: 100%;
  margin: 0 auto;
  height: auto;
  position: relative;
  vertical-align: middle;
}

#display-img {
  max-width: 100%;
  border-style: solid;
  border-color: transparent;
  border-width: 33px;
  display: block;
  text-align: center;
  overflow: hidden;
  opacity: .5;
/*  height: 50px;*/
}


#display-img-placeholder {
  max-width: 100%;
  border-style: solid;
  border-color: white;
  border-width: 33px;
  display: block;
  text-align: center;
/*
  width: 930px;
  max-width: calc(100% - 66px);
  margin: 0 auto;
*/
  filter: contrast(1.5);
/*  position: relative;*/
  position: absolute;
  z-index: -1;
}

#display-img-placeholder img {
  width: 100%;
  opacity: 0;
}

#display-img img {
  width: 100%;
}

#img-container {
  max-width: calc(100% - 66px);
/*
  border-style: solid;
  border-color: white;
  border-width: 33px;
*/
  display: block;
  text-align: center;
  width: 930px;
  max-width: calc(100% - 66px);
  margin: 0 auto;
  position: relative;
}

    <div id="background">
      <img id="background-img" src="http://iamwasserman.com/Portfolio/hoh.jpg">
    </div>
    <div id="body-container">
      <div id="display">
        <div id="img-container">
          <div id="display-img-placeholder">
            <img src="http://iamwasserman.com/Portfolio/hoh.jpg">
          </div>
          <div id="display-img">
            <img src="http://iamwasserman.com/Portfolio/hoh.jpg">
          </div>
        </div>
        <h3 id="time-stamp"></h3>
        <div id="dots">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
    </div>

我需要一种在不影响定位的情况下裁剪图像底部 15% 的方法（因此它必须保持相同的大小，但使底部透明）。我尝试在其周围放置一个容器 <div> 并更改高度，但随后它会更改图像的垂直位置。关于如何做到这一点的想法？

s.a. 1 和 2

Answer 1

你喜欢吗？

#wrap{/* to demonstrate the image on top is partially transparent */
  background-color: rgba(128,128,255,128);
}
#bg {
  background: url(https://i.stack.imgur.com/NgNDR.jpg) no-repeat;
  background-position: -288px, -115px;
/* 1437x768 */
  width: 862px;
  height: 538px;
  border: 2px solid red;
  margin: 115px 288px ;
}
#clip {
/* this is deprecated
  clip: rect( 115px, 288px,  115px, 288px );
*/
/* this works */
clip-path:  inset( 115px 288px  115px 288px );
}

<div id="wrap">
<!--
<img src="https://i.stack.imgur.com/NgNDR.jpg" />

<div id="bg">
</div>
-->

<img src="https://i.stack.imgur.com/NgNDR.jpg" id="clip"/>

</div>

背景位置

基本上，这可以让您的图像具有原始大小 但将链接的图像定位为一开始就自行计算的尺寸。

我首先计算了顶部的 -15%，然后调整了左侧偏移量。后来宽度是原始尺寸和偏移量之间差异的 2 倍。

当然可以使用 javascript 自动计算手动计算。

剪辑

是旧的，但只能与 css 一起工作；你甚至可以做more than just rectangle