Question

this question中已经描述了如何裁剪图像的顶部。但是，当图像尺寸事先未知时，我试图按一定百分比裁剪图像。 然后容器的高度应取决于图像的大小。

使用以下内容，可以裁剪图像的顶部，但是它需要手动指定要显示的图像量（以像素为单位）。有没有一种方法可以指定我要裁剪图像的前10％，而不提前知道图像的大小？

int

.container {
  overflow: hidden;
  position: relative;
  height: 370px;
}

.container img {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  bottom: 0;
  left: 0;
  right: 0;
}

Answer 1

这是一个依赖规模的想法。您使图像保持流动（不要使用position:absolute），然后按0.9缩放容器，这是总高度的90％，然后按1.1缩放图像以保持它是原始尺寸。这样可以将图像修剪10％，但是由于变换只是一种视觉效果，因此您可能在容器的顶部或底部有空间（基于transform-origin）

.container {
  overflow: hidden;
  outline:1px solid red;
  display:inline-block;
}

.container img {
  display:block;
}

.cut {
  transform:scaleY(0.9);
  transform-origin:top; /* The extra space will be on the bottom*/
}

.cut img {
  transform:scaleY(1.1);
  transform-origin:bottom; /* This should be bottom to cut the top*/
}

<div class="container">
  <img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
  <img class="img" src="http://placekitten.com/300/200" >
</div>

更确切地说，我们可以像下面这样考虑calc()：

.container {
  overflow: hidden;
  outline:1px solid red;
  display:inline-block;
}

.container img {
  display:block;
}

.cut {
  transform:scaleY(0.9);
  transform-origin:top; /* The extra space will be on the bottom*/
}

.cut img {
  transform:scaleY(calc(1/0.9));
  transform-origin:bottom; /* This should be bottom to cut the top*/
}

<div class="container">
  <img class="img" src="http://placekitten.com/300/200" >
</div>
<div class="container cut">
  <img class="img" src="http://placekitten.com/300/200" >
</div>

Answer 2

我认为没有Javascript的最佳方法是将图像转换一定百分比，然后缩放以填充容器的原始高度。其他任何东西都会在底部留下空白。

.img_container img {
  transform: translateY(-50%) scale(2);
}

https://jsfiddle.net/amoliski/n4ojdzyr/

Answer 3

这应该可以解决问题，使用translateY（可从How can I get the height of an element using css only中获得）

如您所见，.container没有硬编码的高度，但是它将以原始图像高度加载，即500px，即使图像加载为450px（500px-10％）

.container {
    overflow: hidden;
    position: relative;
}

.container img {
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(-10%);
}

<div class="container">
    <img class="img" src="http://placekitten.com/400/500" />
</div>

Answer 4

您可以使用一些JavaScript来做到这一点（为简单起见，我已对其进行内联，但您可以将其移至其自身的功能中）

<div class="container">
    <img class="img" src="http://placekitten.com/400/500" onload="javascript:this.parentElement.style.height = (this.height * 0.9)+'px';" />
</div>

这是工作中的JSfiddle。

Answer 5

一种替代方法是在相对图像（如下面的代码段）上以负数方式使用top CSS属性。这适用于任意宽度和高度的图像。只需相应地调整您的top值即可。

html,body{ height:100%; margin:0; padding:0; }
.container {
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
    display:flex;
    margin-bottom: -10%;
    align-items:center;
    justify-content:center;
}

.container img {
    position: relative;
    bottom: 0;
    left: 0;
    height: 100%;
    top: -10%;
    right: 0;
}

<div class="container">
    <img class="img" src="http://placekitten.com/400/500" />
</div>

要删除多余的底部边距，只需减去等于从顶部减去的margin-bottom即可。这是margin-bottom: -10%;

根据您的动态图像调整最高值。另请注意，我在您的容器中添加了height:100%，以便您可以看到完整的图像，但顶部会被裁剪。我用flex来居中。
测试其他图像，但是这次是从顶部裁剪50%

html,body{ height:100%; margin:0; padding:0; }
.container {
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
    margin-bottom: -50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.container img {
    position: relative;
    bottom: 0;
    left: 0;
    height: 100%;
    top: -50%;
    right: 0;
}

<div class="container">
    <img class="img" src="https://www.fujifilm.com/products/digital_cameras/x/fujifilm_x_t3/sample_images/img/index/ff_x_t3_002.JPG" />
</div>

使用CSS裁剪图像的前10％？

5 个答案: