Question

我想使用Bootstrap网格布局创建一个图片库。整个画廊的宽度应为100％。我用两个网格排成一行。每个都包含一张图片。来自第一个网格的图片决定了高度。第二个网格中的图片应与第一个网格中的图片具有相同的高度，并左右裁剪。

请参见下面的代码。

我的问题是第二张图片比div大。

我尝试使用overflow: hidden和position: absolute，它的高度合适，但是没有裁剪。

.container {
  width: 100%;
}

.image {
  height: 100%;
}

secondimage {
  overflow: hidden;
}

.heighthundred {
  height: 100%;
  position: absolute;
}

<div id="linknews" class="cointainer">
  <div class="row">
    <div class="col-sm-8">
      <div class="image">
        <div class="">
          <img src="./image1.jpg" class="img-fluid">
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="secondimage">
        <div class="image">
          <img src="./image2.jpg" class="heighthundred">
        </div>
      </div>
    </div>
  </div>

Answer 1

您应该添加位置：相对；在secondimage类上。

secondimage{
    overflow: hidden;
    position: relative;
}

Answer 2

<div class="col-sm-4 padzero"> replace this from below line.

<div class="col-sm-4 padzero" style="overflow: hidden;">

或

将CSS代码放入CSS。

.col-sm-4.padzero{
overflow: hidden;
}

Answer 3

将图像设置为background-image的{{1}}

因此您的html变为：-

div

以及您的CSS

 <div class="image">
    <div style="background-image: url('./image2.jpg');">
    </div>
  </div>

您现在将不需要第二张图像类。

将图像裁剪为div的大小。溢出：隐藏不起作用

3 个答案: