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

Question

我尝试了maxheught / width，显示选项等，我还为图像添加了.img响应类。 它的宽度都可以，但是Iam无法获得所需的高度，无法匹配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%;

Answer 1

做这个

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

这将使img完全适合div并且由于img可能与div具有不同的长宽比，因此由于object-fit:cover它不会被拉伸，而是会缩放（某些部分被切除）。