引导响应图像适合于母公司的高度，拉伸全宽

Question

我有具有一定高度的行（例如600像素），并希望适合一个img（大小1920×1080）到该行，拉伸响应100％到行宽度，但不超过高度。

换言之，只有图像的高度的600像素应该显示（其余的可以被切断，隐蔽等），并且它应该保持响应于行宽度。为了说明这一点，只有红色边框内的部分应显示：

我遇到的问题是，“IMG-流体”总是图像适合于容器的更小的高度，并因此缩小宽度，以保持高宽比。而不IMG-流体，或添加一个固定的高度的图像，纵横比会丢失并且该图像被“挤”入行容器。我的代码：

.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从容器中。

Answer 1

上述解决方案工作，如果.IMG流体未被操作：

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

Answer 2

为了实现你的形象嵌入特定的高度，你可以使用通过NPM的开源库，引导侧墙

npm install uniformimages

或者您可以访问GitHub的页面：

https://github.com/chigozieorunta/uniformimages

下面是如何工作使用“如何依法履行自己”类为例（你需要的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% ; }

希望这可以帮助：）

引导响应图像适合于母公司的高度，拉伸全宽

问题描述投票：1回答：3

3个回答

最新问题

引导响应图像适合于母公司的高度，拉伸全宽

问题描述 投票：1回答：3

3个回答

最新问题

问题描述投票：1回答：3