无法将图像高度拉伸到引导程序中 div 的大小

我已经尝试了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%;

这样做

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

这将使img完全适合div，并且由于 img 的纵横比可能与div 不同，因此它不会被拉伸，而是会因object-fit:cover而缩放(某些部分被切断(。

相关内容

最新更新

热门标签：