如何并排对齐缩略图中的图像？

Question

I have four images where the first two images will be side by side and the rest two images will go to the next row. 我有四个图像，其中前两个图像将并排放置，其余两个图像将进入下一行。 Currently I have four but there could be more. 目前我有四个，但可能还会更多。

I have used a container two put all the contents inside and each of the images are inside a thumbnail. 我使用了一个容器，将所有内容放入其中，每个图像都位于一个缩略图中。

I have also added the zoom on scroll effect where on hovering each image, it will zoom and overlap any other image. 我还添加了滚动缩放效果，将其悬停在每张图像上时，它将缩放并重叠任何其他图像。

But I have trouble putting the images side by side. 但是我很难将图像并排放置。 Here is the screenshot below 这是下面的截图

Also if I try other set of images, I get alignment right but it screws up when I hover on the images. 另外，如果我尝试其他图像集，则可以正确对齐，但是当我将鼠标悬停在图像上时，它会拧紧。

But this doesn't help. 但这无济于事。 I don't see image getting any bigger with any size value I put. 我看不到我放置的任何尺寸值的图像都变得更大。

Secondly I want a consistent alignment across any number of images I put where there will always be two images per row and hovering on any image doesnt screw the alignment of other images. 其次，我希望在我放置的任何数量的图像上保持一致的对齐方式， 每行将始终有两个图像，并且将鼠标悬停在任何图像上不会破坏其他图像的对齐方式。 Adding the below code helps in zoom on hover but sometimes it messes up the position of other images . 添加以下代码有助于放大悬停，但有时会弄乱其他图像的位置 。

img:hover {
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -moz-transform:scale(1.5); /* Firefox */
    -ms-transform:scale(1.5); /* IE 9 */
    -o-transform:scale(1.5); /* Opera */
     transform:scale(1.5);
     z-index: 1;
     position: relative;

I am using bootstrap for alignment so that the alignment is consistent across any screen size. 我正在使用引导程序进行对齐，以便在任何屏幕尺寸上对齐都是一致的。

How can I make this work? 我该如何进行这项工作？

Here is HTML/CSS snippet 这是HTML / CSS代码段

 div { margin-top: 30px; } .container .row img { width: 100%; height: auto; } img { -webkit-transition: all 1s ease; /* Safari and Chrome */ -moz-transition: all 1s ease; /* Firefox */ -ms-transition: all 1s ease; /* IE 9 */ -o-transition: all 1s ease; /* Opera */ transition: all 1s ease; /*object-fit:scale-down;*/ /*object-fit: contain;*/ } img:hover { -webkit-transform:scale(1.5); /* Safari and Chrome */ -moz-transform:scale(1.5); /* Firefox */ -ms-transform:scale(1.5); /* IE 9 */ -o-transform:scale(1.5); /* Opera */ transform:scale(1.5); z-index: 1; position: relative; background:rgba(0,0,0,0.05); border: 1px solid black; opacity: 1; } .img{ width:100px; height:100px; }

 <html> <head> <title>Summary</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="link.css" </head> <body> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 style"> <div class="thumbnail"> <img src="https://demo.utorlabs.com/static/jsw/balance1543844865.53.svg"> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 style"> <div class="thumbnail"> <img src="https://demo.utorlabs.com/static/jsw/balance1543832720.7.svg"> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 style"> <div class="thumbnail"> <img src="https://demo.utorlabs.com/static/jsw/balance1543833670.32.svg"> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 style"> <div class="thumbnail"> <img src="https://demo.utorlabs.com/static/jsw/latency1543855760.2.svg"> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>

Answer 1

I took your code and just changed Bootstrap version from 3.3.7 to current 4.1.3 and … voilá! 我拿走了您的代码，只是将Bootstrap版本从3.3.7更改为当前的4.1.3，并且…哎呀！

 div { margin-top: 30px; } .container .row img { width: 100%; height: auto; } img { -webkit-transition: all 1s ease; /* Safari and Chrome */ -moz-transition: all 1s ease; /* Firefox */ -ms-transition: all 1s ease; /* IE 9 */ -o-transition: all 1s ease; /* Opera */ transition: all 1s ease; /*object-fit:scale-down;*/ /*object-fit: contain;*/ } img:hover { -webkit-transform:scale(1.5); /* Safari and Chrome */ -moz-transform:scale(1.5); /* Firefox */ -ms-transform:scale(1.5); /* IE 9 */ -o-transform:scale(1.5); /* Opera */ transform:scale(1.5); z-index: 1; position: relative; background:rgba(0,0,0,0.05); border: 1px solid black; opacity: 1; }

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 style"> <div class="thumbnail"> <img src="https://demo.utorlabs.com/static/jsw/balance1543844865.53.svg"> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 style"> <div class="thumbnail"> <img src="https://demo.utorlabs.com/static/jsw/balance1543832720.7.svg"> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 style"> <div class="thumbnail"> <img src="https://demo.utorlabs.com/static/jsw/balance1543833670.32.svg"> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 style"> <div class="thumbnail"> <img src="https://demo.utorlabs.com/static/jsw/latency1543855760.2.svg"> </div> </div> </div> </div>

Answer 2

you can use 您可以使用

.style:nth-child(2n+1) {
    clear: both;
}

 div { margin-top: 30px; } .container .row img { width: 100%; height: auto; } img { -webkit-transition: all 1s ease; /* Safari and Chrome */ -moz-transition: all 1s ease; /* Firefox */ -ms-transition: all 1s ease; /* IE 9 */ -o-transition: all 1s ease; /* Opera */ transition: all 1s ease; /*object-fit:scale-down;*/ /*object-fit: contain;*/ } img:hover { -webkit-transform:scale(1.5); /* Safari and Chrome */ -moz-transform:scale(1.5); /* Firefox */ -ms-transform:scale(1.5); /* IE 9 */ -o-transform:scale(1.5); /* Opera */ transform:scale(1.5); z-index: 1; position: relative; background:rgba(0,0,0,0.05); border: 1px solid black; opacity: 1; } .style:nth-child(2n+1) { clear: both; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 style"> <div class="thumbnail"> <img src="https://demo.utorlabs.com/static/jsw/balance1543844865.53.svg"> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 style"> <div class="thumbnail"> <img src="https://demo.utorlabs.com/static/jsw/balance1543832720.7.svg"> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 style"> <div class="thumbnail"> <img src="https://demo.utorlabs.com/static/jsw/balance1543833670.32.svg"> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 style"> <div class="thumbnail"> <img src="https://demo.utorlabs.com/static/jsw/latency1543855760.2.svg"> </div> </div> </div> </div>

Answer 3

Since Bootstrap is 12 column grid, you need to set two images in a with width col-6* classes to align two images. 由于Bootstrap是12列网格，因此需要在宽度为col-6 *的类中设置两个图像，以对齐两个图像。 And provide a "overflow: hidden" for .row since it doesn't break when you hover. 并为.row提供“溢出：隐藏”，因为悬停时它不会中断。 I have added the fiddle for your reference. 我添加了小提琴供您参考。 jsfiddle 的jsfiddle

.row{
   overflow: hidden;
}

如何并排对齐缩略图中的图像？

问题描述

3 个解决方案

解决方案1
2 已采纳 2018-12-04 08:07:20

解决方案2
1 2018-12-04 08:22:15

解决方案3
0 2018-12-04 08:19:30

如何并排对齐缩略图中的图像？

问题描述

3 个解决方案

解决方案1 2 已采纳 2018-12-04 08:07:20

解决方案2 1 2018-12-04 08:22:15

解决方案3 0 2018-12-04 08:19:30

解决方案1
2 已采纳 2018-12-04 08:07:20

解决方案2
1 2018-12-04 08:22:15

解决方案3
0 2018-12-04 08:19:30