引导响应图像适合父高度，拉伸全宽答案

【问题标题】：Bootstrap responsive image fit to parent height, stretching full width引导响应图像适合父高度，拉伸全宽
【发布时间】：2019-02-09 12:00:10
【问题描述】：

我有一个特定高度（例如 600 像素）的行，并希望将一个 img（大小 1920x1080）放入该行，响应性地拉伸 100% 到行宽但不超过高度。

换句话说，应该只显示图像高度的 600 像素（其余的可以被切断、隐藏等），并且应该保持对行宽的响应。为了说明，只有红色边框内的部分应该显示：

我遇到的问题是“img-fluid”总是使图像适合容器的较小高度，从而缩小宽度以保持纵横比。如果没有 img-fluid 或为图像添加固定高度，纵横比就会丢失，并且图像会被“挤压”到行容器中。我的代码：

.img-400 {
  height: 400px !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"  integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<div class="container">
  <div class="row img-400">
    <div class="col-12">
      <img src="https://image.ibb.co/iG8OSb/dogs.jpg" class="img-fluid" />
    </div>
  </div>
</div>

注意我试过这个：Constraining image height with bootstrap responsive image? 但没用，它不断将 img 缩放到容器之外。

【问题讨论】：

标签： css twitter-bootstrap responsive-design responsive-images

【解决方案1】：

如果不操纵 .img-fluid，上述解决方案有效：

.img-400 {
  height: 400px;
  overflow: hidden;
}

【讨论】：

【解决方案2】：

你好，试试这个，

.img-400 img{ width: 100% ; }

希望这会有所帮助:)

【讨论】：

【解决方案3】：

要使您的图像适合特定高度，您可以通过 NPM 使用开源库 bootstrap-spacer

npm install uniformimages

或者你可以访问github页面：

https://github.com/chigozieorunta/uniformimages

这是一个使用“unim”类如何工作的示例（为此您需要 jQuery）：

<!DOCTYPE html>
<html>
<head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
      <link href="uniformimages.css" rel="stylesheet" type="text/css"/>
      <script src="uniformimages.js" type="text/javascript"></script>
</head>

<body>
    <section>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <a href="product1.html">
                        <img src="image1.jpg" class="unim" height="100"/>
                    </a>
                </div>
            </div>
        </div>
    </section>
</body>

【讨论】：