[英]How do I keep all the images the same size height and width wise inside of a thumbnail using bootstrap
我正在嘗試使用引導程序創建畫廊，但我似乎無法在高度和寬度上都將所有圖像都保持相同大小。 如何使圖庫中的所有圖像大小相同。
這是jsfiddle- https://jsfiddle.net/j0z3sq5s/抱歉，我正在localhost / localserver上工作，無法看到圖像。 但是我已經做了一些截屏。
<!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;
}
.thumbnail img{
height: 300px;
width: 100%;
object-fit : cover;
}
.thumbnail img {
width: 100%;
object-fit: fill;
height: 100vh!important;
}
在這里，您可以對object-fit進行說明： 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>
如何調整圖像大小以適合特定的縮略圖寬度/高度？
[英]How do I make images resize to fit inside a certain thumbnail width/height?
如何使Bootstrap縮略圖圖像具有相同的高度，以使縮略圖面板對齊？
[英]How can I make Bootstrap thumbnail images the same height so that the thumbnail panels align?
Bootstrap：如何使響應圖像保持相同的高度，即使高度不一樣？
[英]Bootstrap: How can I keep responsive images the same height even if they are not?
如何在引導程序中使縮略圖的大小相同而分辨率不同
[英]How to make thumbnail images same size while different resolution in bootstrap
如何使不同尺寸圖像的圖像行高度相同並填充所有窗口寬度
[英]How to make image row of different size images same by height and fill all window width
如何將圖像保持在具有固定寬度和高度的div內，而將其余圖像隱藏起來？
[英]How do I keep an image inside a div with a set width and height, but keep the rest of the image hidden?
如何使 Bootstrap 卡片中的圖像具有相同的高度/寬度？
[英]How to get images in Bootstrap's card to be the same height/width?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.