如何使用引导程序在缩略图内部保持所有图像的高度和宽度相同

时间：2018-05-24 06:39:34

标签： html css bootstrap-4

我正在尝试使用bootstrap创建一个库，我似乎无法保持所有图像的高度和宽度都相同。 如何使图库中的所有图像大小相同。

这里是jsfiddle- https://jsfiddle.net/j0z3sq5s/ 我正在为本地主机/本地服务器工作而道歉并且无法看到图像。但是我拍了一些屏幕截图。

enter image description here

enter image description here 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Michael Jordan Tribute Page</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="mj.css">
</head>

<body>
  <div class="jumbotron">
    </div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
  <li><a href="home.html">Home</a></li>
  <li><a href="AboutMJ.html">About MJ</a></li>
  <li><a href="Accomplishments.html">Accomplishments</a></li>
  <li><a href="Statistics.html">Statistics</a></li>
  <li><a href="Gallery.html">Gallery</a></li>
  <li><a href="Quotes.html">Quotes</a></li>
</ul>
</nav>
<h1>Gallery</h1>
<div class="container-fluid">
  <div class="row">
  <div class="col-md-4">
  <div class="thumbnail">
<img src="niceMJ.jpg" alt="">
  </div>
  </div>
  <div class="col-md-4">
  <div class="thumbnail">
<img src="jordanOne.jpeg" alt="">
  </div>
  </div>
  <div class="col-md-4">
  <div class="thumbnail">
<img src="jute.jpg" alt="">
  </div>
  </div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="download.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="mike.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="asper.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="jordannew.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="Michael.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="dunk.jpeg" alt="">
</div>
</div>
</div>
</div>
<footer class="footer container-fluid text-center">
  <p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</div>
</body>
</html>

这是css 

h1{
  padding: 20px;
}

h2{
  text-align: center;
  font-size: 60px;
}
p {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  font-family: "Gill Sans", sans-serif;
  font-size: 24px;
  text-align: center;
  font-style: italic;
}
.col-md-4{
  padding-bottom: 20px;
}
.thumbnail img{
    min-height: 300px;
    min-width: 300px;
}
.jordan{
  padding: 10px;
}
.summary{
  padding: 10px;
}
.pergame{
  position: relative;
  width: 100%;
  padding: 10px;
}
.Totals{
  position: relative;
  width: 100%;
    padding: 10px;
}
#para{
  padding-left: 20px;
  padding-right: 20px;
  font-family: "Gill Sans", sans-serif;
  font-size: 18px;
  text-align: justify;
}


li{
  list-style-type: none;
}


.mb-0 {
  margin-bottom: 0 !important;
}
.stats{
  padding-right: 30px;
  padding-left: 20px;
  padding-bottom: 20px;
  height: 400px;
  width: 350px;
  float: left;
}
.jumbotron{
  height: 350px;
  width: 100%;
  background-size: 100% 100%;
  background-image:url(mj.jpg);
  margin: 0;

}


.navbar {
  margin: 0;
  font-size: 20px;
  font-family: "Gill Sans", sans-serif;
}

.footerhome{
  background-color: grey;
  padding: 30px;
  width: 100%;
  padding-bottom: 0 !important;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.footer{
  background-color: grey;
  padding-bottom: 0 !important;
  padding: 30px;
  width: 100%;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.text-center p{
  text-align: center;
  font-size: 20px;
  font-style: italic;
  font-family: "Gill Sans", sans-serif;
}

2 个答案:

答案 0 :(得分：0)

.thumbnail img{
    height: 300px;
    width: 100%;
    object-fit : cover;
}

答案 1 :(得分：0)

   .thumbnail img {
        width: 100%;
        object-fit: fill;
        height: 100vh!important;
    }

您可以在这里解释对象：https://css-tricks.com/almanac/properties/o/object-fit/ 

.thumbnail img {
        width: 100%;
        object-fit: fill;
            height: 100vh!important;
    }
h1{
  padding: 20px;
}

h2{
  text-align: center;
  font-size: 60px;
}

p {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  font-family: "Gill Sans", sans-serif;
  font-size: 24px;
  text-align: center;
  font-style: italic;
}
.col-md-4{
  padding-bottom: 20px;
}
.thumbnail img{
    min-height: 300px;
    min-width: 300px;
}
.jordan{
  padding: 10px;
}
.summary{
  padding: 10px;
}
.pergame{
  position: relative;
  width: 100%;
  padding: 10px;
}
.Totals{
  position: relative;
  width: 100%;
    padding: 10px;
}
#para{
  padding-left: 20px;
  padding-right: 20px;
  font-family: "Gill Sans", sans-serif;
  font-size: 18px;
  text-align: justify;
}


li{
  list-style-type: none;
}


.mb-0 {
  margin-bottom: 0 !important;
}
.stats{
  padding-right: 30px;
  padding-left: 20px;
  padding-bottom: 20px;
  height: 400px;
  width: 350px;
  float: left;
}
.jumbotron{
  height: 350px;
  width: 100%;
  background-size: 100% 100%;
  background-image:url(mj.jpg);
  margin: 0;

}


.navbar {
  margin: 0;
  font-size: 20px;
  font-family: "Gill Sans", sans-serif;
}

.footerhome{
  background-color: grey;
  padding: 30px;
  width: 100%;
  padding-bottom: 0 !important;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.footer{
  background-color: grey;
  padding-bottom: 0 !important;
  padding: 30px;
  width: 100%;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

.text-center p{
  text-align: center;
  font-size: 20px;
  font-style: italic;
  font-family: "Gill Sans", sans-serif;
}
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Michael Jordan Tribute Page</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="mj.css">
</head>

<body>
  <div class="jumbotron">
    </div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
  <li><a href="home.html">Home</a></li>
  <li><a href="AboutMJ.html">About MJ</a></li>
  <li><a href="Accomplishments.html">Accomplishments</a></li>
  <li><a href="Statistics.html">Statistics</a></li>
  <li><a href="Gallery.html">Gallery</a></li>
  <li><a href="Quotes.html">Quotes</a></li>
</ul>
</nav>
<h1>Gallery</h1>
<div class="container-fluid">
  <div class="row">
  <div class="col-md-4">
  <div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
  </div>
  </div>
  <div class="col-md-4">
  <div class="thumbnail">
<img src="jordanOne.jpeg" alt="">
  </div>
  </div>
  <div class="col-md-4">
  <div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
  </div>
  </div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="mike.jpg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="jordannew.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="Michael.jpeg" alt="">
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="dunk.jpeg" alt="">
</div>
</div>
</div>
</div>
<footer class="footer container-fluid text-center">
  <p>"Website created using Bootstrap 4 by Andrew"</p>
</footer>
</div>
</body>
</html>

相关问题
最新问题