Question

我有一个具有一定高度的行（例如600px），并希望在此行中放入一个img（大小为1920x1080），相应地延伸100％到行宽但不超过高度。

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

我遇到的问题是＆＃34; img-fluid＆＃34;始终将图像适合容器的较小高度，从而缩小宽度以保持纵横比。如果没有img-fluid，或者为图像添加固定的高度，则会丢失纵横比并且图像被压缩＆＃34;进入行容器。我的代码：

＆＃13;

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

＆＃13;

<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>

＆＃13;

注意我试过这个：Constraining image height with bootstrap responsive image?但是没有用，它会不断地将img从容器中缩放出来。

Answer 1

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

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

Answer 2

要使图像适合特定的高度，可以通过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>

Answer 3

嗨试试这个，

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

希望这会有所帮助：）

Bootstrap响应图像适合父高，拉伸全宽

3 个答案: