Question

我有四个图像，其中前两个图像将并排放置，其余两个图像将进入下一行。 目前我有四个，但可能还会更多。

我使用了一个容器，将所有内容都放入其中，每个图像都位于缩略图中。

我还添加了“滚动缩放”效果，将其悬停在每张图像上时，它将缩放并重叠其他任何图像。

但是我很难将图像并排放置。这是下面的屏幕截图

如果我尝试其他图像，也可以正确对齐，但是当我将鼠标悬停在图像上时，它会变紧。

但这没有帮助。我看不到我放置的任何尺寸值的图像都变得更大。

第二，我希望在任意数量的图像上保持一致的对齐方式，我总是将每行两张图像放置在任何图像上，并且将鼠标悬停在任何图像上都不会破坏其他图像的对齐方式图片。添加以下代码有助于放大悬停，但有时会弄乱其他图像的位置。

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>

Answer 1

我接受了您的代码，只是将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

您可以使用

.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

由于Bootstrap是12列网格，因此您需要在宽度为col-6 *类的a中设置两个图像，以对齐两个图像。并为.row提供“溢出：隐藏”，因为悬停时它不会中断。我添加了小提琴供您参考。 jsfiddle

.row{
   overflow: hidden;
}

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

3 个答案: