У меня есть четыре изображения, где первые два изображения будут расположены рядом, а остальные два изображения перейдут в следующий ряд. В настоящее время у меня их четыре, но их может быть и больше.
Я использовал контейнер два, поместил все содержимое внутрь, а каждое изображение находилось внутри эскиза.
Iтакже добавлен эффект увеличения при прокрутке, при котором при наведении курсора на каждое изображение оно будет увеличивать и перекрывать любое другое изображение.
Но у меня возникают проблемы при размещении изображений рядом.Вот скриншот ниже
Кроме того, если я попробую другой набор изображений, у меня получится правильное выравнивание, но оно облажается при наведении курсора на изображения.
Но это не помогает.Я не вижу, чтобы изображение становилось больше при любом значении размера, которое я поместил.
Во-вторых, я хочу последовательное выравнивание по любому количеству изображений Я ставлю там, где всегда будет дваколичество изображений в строке и зависание на любом изображении не влияет на выравнивание других изображений.Добавление приведенного ниже кода помогает при масштабировании при наведении, но иногда портит положение других изображений .
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>