无法在 Bootstrap 中将图像高度拉伸到 div 的大小答案

【问题标题】：Cannot Stretch image heigh to the size of div in Bootstrap无法在 Bootstrap 中将图像高度拉伸到 div 的大小
【发布时间】：2017-05-11 14:14:47
【问题描述】：

我已经尝试过 maxheught/width、显示选项等，我还在图像中添加了 .img 响应类。它的宽度一切正常，但我无法获得所需的高度，以匹配 div 比例。这是我的 HTML。

<!DOCTYPE html>
<html lang="UA-ru">
    <head>
        <title> Portfolio</title>
       <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet"  href="CSS/custom.css" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
    </head>
    <body>
        <div id="rowfirst" class="container-fluid">
        <div class="row">
            <div id="elementUnique" class="1element col-lg-6"><div></div><img id="img1"; class="img-responsive" src="https://c1.staticflickr.com/5/4162/34184651430_22e9d95b50_z.jpg"></div>
            <div id="element1" class="1element col-lg-4"><div></div><img id="img1"; class="img-responsive" src="img/1img.JPG"></div>
            <div id="element1" class="1element col-lg-4"><div></div><img id="img1"; class="img-responsive" src="img/1img.JPG"></div>
            <div id="element1" class="1element col-lg-4"><div></div><img id="img1"; class="img-responsive" src="img/1img.JPG"></div>

            </div>
               <div class="row">
            <div id="elementUnique" class="1element col-lg-6"><div></div><img id="img1"; class="img-responsive" src="img/2img.jpg"></div>
            <div id="element1" class="1element col-lg-4"><div></div><img id="img1"; class="img-responsive" src="img/1img.JPG"></div>
            <div id="element1" class="1element col-lg-4"><div></div><img id="img1"; class="img-responsive" src="img/1img.JPG"></div>
            <div id="element1" class="1element col-lg-4"><div></div><img id="img1"; class="img-responsive" src="img/1img.JPG"></div>


            </div>
            </div>


    <nav id="mynavigation" class="navbar navbar-inverse navbar-fixed-bottom">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
             <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
                <a class="navbar-brand" href="#">Portfolio</a></div>
            <div class="collapse navbar-collapse" id="myNavbar">
            <div id="navbarul"><ul  class=" nav navbar-nav">
              <li><a id="navbar">Web</a></li>
                 <li><a id="navbar">Video</a></li>
                 <li><a id="navbar">Photo</a></li>
            </ul>
                </div></div></div></nav>

    </body>
</html>

还有 CSS：

#navbarul{
    width: 20%;
    margin: auto;
    display: block;

}
#navbar{
    display: block;
    font-family: "Abel", sans sans-serif;
   text-transform: uppercase;
    font-size: 2em;
    cursor: pointer; 
}

#element1{
    display: block;
    width: 22%;
  height: 460px;
    padding: 0;
      border: 2px solid blue;
     margin: 0;
}
#elementUnique{
    display: inline-block;
    width: 33%;
    height: 460px;
    padding: 0;
    border: 2px solid blue;
     margin: 0;
   }

#element1:hover {
    outline: 5px solid rgb(255,255,77);
    outline-offset: -5px;

}
#elementUnique:hover{
     outline: solid rgb(255, 255, 77) 5px;
      outline-offset: -5px;
}

#img1{
max-height:100%;
    padding: 0;
    margin: 0;

  }


}
#img1:hover { 
    outline: solid rgb(255, 255, 77) 5px;
      outline-offset: -5px;
}

#myNavbar{
    height: 15%;
    display: no
}
#rowfirst{
    width: 100%;
    height: 100%;
    margin: 0;


}

   html {
    height: 100%;

}

body {
    height: 100%;

【问题讨论】：

我刚刚添加到#img1{ height:100%} 就是你想要的
您应该只有 1 个 id="img1" 的元素。另外，请修复无效的 HTML。
@FadiAboMsalam - 只需添加height:100% 就会导致拉伸。必须附加 object-fit:cover 以保持纵横比。
@mrinalmech 感谢您提供的信息，我会牢记在心
您应该只有 1 个 id="img1" 的元素 - 是的，我知道，我会更改它，谢谢。高度 100% 适合对象：封面拯救了我的一天。谢谢大家

标签： html css twitter-bootstrap

【解决方案1】：

这样做

img{
 height:100%;
 object-fit:cover;
}

这将使img 完全适合div，并且由于img 可能与div 具有不同的纵横比，它不会被拉伸而是缩放（某些部分被切断），因为@ 987654324@.

【讨论】：