Question

我输入的文件带有预览。

我想强迫身高，但我不知道该怎么办。我想将此组件的高度固定为300px（示例），并且还需要保持加载的图像的正确长宽比，并用灰色背景填充空白。现在我保持宽高比，但是高度会根据加载的图像而变化。

这是我的HTML（这是vue组件）

  <body><div id="">
  <div class="field-body row">
    <div class="col-md-6">
    <div class="card" style="height: 400px">
      <div class="card-image">
        <figure class="image imup-image" style="padding-top: 75%">

          <img src="http://www.lagom.nl/lcd-test/img/gamma-test-2.png">
        </figure>
      </div>
      <footer class="card-footer">
        <div class="form-group ">
                    <div class="input-group">
            <div class="input-group-prepend">
              <button class="btn btn-outline-danger" type="button" >Elimina</button>
            </div>
            <div class="custom-file">



                        </div>
                    </div>
                </div>

      </footer>
    </div>

  </div></div></div>

</body>

这是CSS

figure {
    text-align: center;
    background-color: #acacac;
    margin: 0;
  }
  .custom-file-label::after {
    background-color: #375faf;
    color: white;
  }
  .btn {
    margin-right: 0;
  }
  .imup-image {
    position:relative;
    width: 100%;
  }

  .alert{
    position:absolute; /*it can be fixed too*/
    left:0; right:0;
    top:0; bottom:0;
    margin:50px;
    z-index: 3;
    /*this to solve "the content will not be cut when the window is smaller than the content": */
    max-width:100%;
    max-height:100%;
    overflow:auto;
  }
  img {
  /* make the image inside the padding space */
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    /* make sure the image will not over the division */
    max-height:100%;
    max-width:100%;
    /* center the image */
    display:block;
    margin: auto;
  }

您可以尝试使用该组件，它可以正常工作，并且可以保持图像的宽高比。但是我需要强制高度。

Answer 1

您是否尝试过使用object-fit和object-position的CSS规则来确定您的身材？看起来可以解决您的问题。

具有固定高度和响应图像的CSS卡

1 个答案: