Question

我列出了图片列表，并尝试将图片的高度减半。

.img {
  background: #255;
}

img {
  max-width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="img">
          <img src="https://via.placeholder.com/800x200/009/fff.png">
        </div>
        <div class="card-body">
          <h5 class="card-title">Image title</h5>
          <p class="card-text">description text.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="img">
          <img src="https://via.placeholder.com/550x768/009/fff.png">
        </div>
        <div class="card-body">
          <h5 class="card-title">Image title</h5>
          <p class="card-text">description text.</p>
        </div>
      </div>
    </div>
  </div>
</div>

我使用了transform属性。这看起来像是可行的，但是在图像和文本之间保留了一个隐藏区域。我想在失去这个空间时实现操作。

.img {
  background: #255;
  transform: scaleY(0.5);
  transform-origin: top;
  overflow: hidden;
}

img {
  max-width: 100%;
  transform: scaleY(2);
  transform-origin: top;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="img">
          <img src="https://via.placeholder.com/800x200/009/fff.png">
        </div>
        <div class="card-body">
          <h5 class="card-title">Image title</h5>
          <p class="card-text">description text.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="img">
          <img src="https://via.placeholder.com/550x768/009/fff.png">
        </div>
        <div class="card-body">
          <h5 class="card-title">Image title</h5>
          <p class="card-text">description text.</p>
        </div>
      </div>
    </div>
  </div>
</div>

为什么将裸露区域留为空白？另外，如何隐藏曝光过度的区域？如何查看仅是图像高度一半的图像？

Answer 1

我将按顺序回答您的每个问题。

为什么裸露的区域留有空白？

“ transform：scaleY”是一种应用于当前元素的样式，用于定义要显示在屏幕上的元素的高度。它不会改变屏幕上为该元素分配的空间量。

因此，当您将转换应用于元素（在本例中为图片）时，就是说您只想显示页面上元素高度的一半，而不是将元素更改为元素高度的50％。

然后使用“ transform-origin：”，它询问您要在元素的哪一点开始显示该元素。然后，您选择“ top”，它告诉网页您现在要从顶部开始显示元素的一半。这就是为什么您看到两个图像的上半部分。

空格是您指定的元素中不想显示的部分。元素仍然具有图像的一半，只是没有显示，所以这是您的空白。

另外，如何隐藏曝光过度的区域？

要除去裸露的区域，您所需要做的就是除去“变换：scaleY（0.5）;”。 .img类的样式。这告诉网页您要显示该元素的完整高度，因为将其设置回其默认值1。应该保持其他“变换：scaleY（2）”，因为现在它将使img元素的大小增加一倍在其父元素的初始高度内。然后，“溢出：隐藏”将隐藏新图像高度的下半部分。

如何查看仅是图像高度一半的图像？

这是相当模糊的，因此我将在您只想显示图像已知尺寸的上半部分的假设下回答。例如使用800x200像素的图像。

.img {
    height: 100px;
    overflow: hidden;
}

img {
    max-width: 100%;
}

这只是使容器元素的高度为图片的一半，因此它只会显示图片的一半。图像另一半的溢出被隐藏。此外，由于最大宽度设置为100％，因此图像不会调整到其容器大小。

如何使图像半高？

1 个答案: