在引导网格中使图像大小相同

Question

I am creating an image gallery with 3 rows, each containing 3 images by using the Bootstrap grid system. All of the images have different size. What I am trying to do is make all of the images the same size. I tried to use the max-height or max-width in my CSS, however it didn't help to make all the images (thumbnails) similar size. Should I just get rid of the thumbnail class or is there any other solution?

 body { padding-top: 70px;}.row.flex { display: inline-flex; width: 100%;} img { width:100%; min-height:100px;}

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row match-to-row"> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/eKTUtA74uN0" alt=""> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/x-tbVqkfQCU" alt=""> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/cjpGSEkXfwM" alt=""> </div> </div> <div class="row match-to-row"> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/63JKK67yGUE" alt=""> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/YP6lDrlxWYQ" alt=""> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/NqE8Ral8eCE" alt=""> </div> </div> <div class="row flex match-to-row"> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/6oUsyeYXgTg" alt=""> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/WF2lvywxdMM" alt=""> </div> </div> <div class="col-lg-4 col-sm-6"> <div class="thumbnail"> <img src="https://source.unsplash.com/2FdIvx7sy3U" alt=""> </div> </div> </div> </div>

Answer 1

I think the property you're looking for is object-fit

img {
    width: 200px; /* You can set the dimensions to whatever you want */
    height: 200px;
    object-fit: cover;
}

The object-fit property works similarly to how you would using background-size: cover on a background image to make it fill the page without stretching. This way, you can define a width in a rule that all images will follow to ensure that they are the same size without distorting your picture.

Other values you can use with this property includes:

• fill - stretch the image.
• contain - preserve the aspect ratio of the image.
• cover - Fill the height and width of the box.
• none - Keep the original size.
• scale-down - compare the differences between none and contain to find the smallest object size.

object-fit | CSS-Tricks

Answer 2

Add the css class img-responsive to every image.

Answer 3

just modify this:

img {
    width: 100px; // how much you want
    min-height: 100px;
    float: left;
    margin: 10px;
}

Answer 4

Go to "Inspect Element" in your browser and look for something like:

.thumbnail a>img, .thumbnail>img {
    display: block;
    width: 100%;
    height: auto; }

Change it to:

.thumbnail a>img, .thumbnail>img {
    display: block;
    width: 100%;
    height: 300px; //change as per your requirement }

Answer 5

Bootstrap's grid system uses a series of containers, rows, and columns to layout and align content. Top level, is Container and rows and columns are displayed under it. In Bootstrap, there are 4 classes xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide)

How to decide on column display: A page is divided into 12columns grid and width is calculated as width: percentage((@columns / @grid-columns)); 1 column / 12 grid-columns = 8.33% * 1170px = 97.5px there are no partial pixels so browsers rounds the number. col-md-2 - Will display 6 images in a row. 2 means 2 columns to display an image

col-sm-12 - Class will help in stacking the image when opened on small devices

.img-center - Is custom class to defined additional properties for the image box Hope this helps.

 .img-center { text-align: center; border-radius: 8px; width: 100px; background-color: white; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1); }.row { display: flex; margin: auto; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <link rel="stylesheet" href="EightImages.css" /> <link rel="images" href="images" /> <link rel="stylesheet" href="css/bootstrap-grid.min.css" /> <link rel="stylesheet" href="css/bootstrap.min:css" /> <title>Document</title> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-12 col-md-2"> <img class="img-fluid img-center" src="https.//cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340:jpg" /> <p> Test </p> </div> <div class="col-sm-12 col-md-2"> <img class="img-fluid img-center" src="https.//cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340:jpg" /> <p> Test </p> </div> <div class="col-sm-12 col-md-2"> <img class="img-fluid img-center" src="https.//cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340:jpg" /> <p> Test </p> </div> <div class="col-sm-12 col-md-2"> <img class="img-fluid img-center" src="https.//cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340:jpg" /> <p> Test </p> </div> <div class="col-sm-12 col-md-2"> <img class="img-fluid img-center" src="https.//cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340:jpg" /> <p> Test </p> </div> <div class="col-sm-12 col-md-2"> <img class="img-fluid img-center" src="https.//cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340:jpg" /> <p> Test </p> </div> <div class="col-sm-12 col-md-2"> <img class="img-fluid img-center" src="https.//cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340:jpg" /> <p> Test </p> </div> <div class="col-sm-12 col-md-2"> <img class="img-fluid img-center" src="https.//cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426__340.jpg" /> <p> Test </p> </div> </div> </div> <script src="js/bootstrap.min:js"></script> <script src="https.//code.jquery.com/jquery-3.2.1.slim.min:js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" ></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous" ></script> </body> </html>

Answer 6

As was commented by Dushyant Surya , try this:

I added 2 extra rules to make the img prettier. I can't comment because i don't have reputation points yet btw. But this works fine for me!

.thumbnail a>img, .thumbnail>img {
  display: block;
  width: 100%;
  height: 250px;
  // but add these to make your images prettier and keep the quality.
  object-fit: cover;
  image-resolution: from-image;
}