如何並排對齊縮略圖中的圖像？
[英]How to align images inside a thumbnail side by side?
問題描述
我有四個圖像，其中前兩個圖像將並排放置，其余兩個圖像將進入下一行。 目前我有四個，但可能還會更多。
我使用了一個容器，將所有內容放入其中，每個圖像都位於一個縮略圖中。
我還添加了滾動縮放效果，將其懸停在每張圖像上時，它將縮放並重疊任何其他圖像。
但是我很難將圖像並排放置。 這是下面的截圖
另外，如果我嘗試其他圖像集，則可以正確對齊，但是當我將鼠標懸停在圖像上時，它會擰緊。
但這無濟於事。 我看不到我放置的任何尺寸值的圖像都變得更大。
其次，我希望在我放置的任何數量的圖像上保持一致的對齊方式， 每行將始終有兩個圖像，並且將鼠標懸停在任何圖像上不會破壞其他圖像的對齊方式。 添加以下代碼有助於放大懸停，但有時會弄亂其他圖像的位置 。
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;
我正在使用引導程序進行對齊，以便在任何屏幕尺寸上對齊都是一致的。
我該如何進行這項工作？
這是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>
3 個解決方案
解決方案1
2 已采納 2018-12-04 08:07:20
我拿走了您的代碼，只是將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>
解決方案2
1 2018-12-04 08:22:15
您可以使用
.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>
解決方案3
0 2018-12-04 08:19:30
由於Bootstrap是12列網格，因此需要在寬度為col-6 *的類中設置兩個圖像，以對齊兩個圖像。 並為.row提供“溢出：隱藏”，因為懸停時它不會中斷。 我添加了小提琴供您參考。 的jsfiddle
.row{
overflow: hidden;
}
如何 - 並排對齊圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.