Изображения макета сетки должны быть настроены без учета высоты и ширины - PullRequest
0 голосов
/ 11 марта 2020

Я работаю над сеткой изображений. Несколько я достиг макета, используя высоту и ширину. но я хочу, чтобы изображения были настроены динамически без высоты и ширины.

Я ожидаю вывода без высоты и ширины. ниже приведено изображение макета сетки:

enter image description here

Чего я достиг, используя неправильную высоту и ширину, которую я хочу настроить динамически высота и ширина изображений ниже - это ссылка на кодовый блок. введите описание ссылки здесь

Вместо синего фона мне нужно изображение.

Как мне добиться этого макета? Кто-нибудь может подсказать мне в правильном направлении? Заранее спасибо ...

.section-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}
.ansa-gallery-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    padding: 10px 0 60px;
    align-items: flex-end;
}
.ansa-gallery-items2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    padding: 0 0 10px;
    margin-left: 150px;
  
    align-items: center;
}
.grid-img {
    border: 1px solid gray;
    padding: 20px 10px;
    border-radius: 25px;
}
#grid-img-left {
    margin-bottom: -45px;
}
.ansa-item-img.img-1 {
    height: 250px;
    width: 525px;
}
.ansa-item-img.img-2,
.ansa-item-img.img-4 {
/*     margin-left: 25px; */
    height: 380px;
    width: 315px;
    
}
#grid-img-right {
  margin-left: 25px;
}
.ansa-item-img.img-3,
.ansa-item-img.img-5 {
/*     margin-left: 30px;
    width: 330px;
    height: 200px; */
  
      height: 300px;
    width: 280px;
}
/* .ansa-item-img.img-4 {
    width: 780px;
    height: 290px;
} */
/* .ansa-item-img.img-5 {
    margin-top: -192px;
    margin-left: 30px;
    width: 330px;
    height: 480px;
} */
.ansa-mansory-item {
/*     margin-top: 30px; */
  
}
.ansa-item-img {
    object-fit: cover;
    display: block;
    width: 100%;
}
/* #ansa-load {
    display: none;
} */
.ansa-mansory-item figure {
    margin: 0;
}
#grid-img-left2 {
/*     margin-left: 100px; */
}
#grid-img-center {
    margin: 0 30px;
}
div#grid-img-right2 {
/*     margin-left: 30px; */
    margin-top: -175px;
}
<div class="ansa-slider-media">
		<div class="section-inner">
<!-- 			<h2 class="ansa-media-tilte">Gallery</h2> -->
			<div class="masonry-grid">
				<div class="ansa-gallery-items">
				    <div class="ansa-mansory-item">
              <div class="grid-img" id="grid-img-left">
                
						   <figure><img class="ansa-item-img img-1" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
				    </div>
              </div>
				    <div class="ansa-mansory-item">
              <div class="grid-img" id="grid-img-right">
				   		<figure><img class="ansa-item-img img-2" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
				    </div>
              </div>
				</div>
        
        <div class="ansa-gallery-items2">
				    <div class="ansa-mansory-item">
              <div class="grid-img" id="grid-img-left2">
                
						   <figure><img class="ansa-item-img img-3" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
				    </div>
              </div>
				    <div class="ansa-mansory-item">
              <div class="grid-img" id="grid-img-center">
				   		<figure><img class="ansa-item-img img-4" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
				    </div>
              </div>
           <div class="ansa-mansory-item">
              <div class="grid-img" id="grid-img-right2">
				   		<figure><img class="ansa-item-img img-5" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
				    </div>
              </div>
				</div>
<!-- 				<div class="ansa-gallery-items">
				    <div class="ansa-mansory-item">
				    	<figure><img class="ansa-item-img img-4" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
				    </div>
				    <div class="ansa-mansory-item">
				    	<figure><img class="ansa-item-img img-5" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
				    </div>
             <div class="ansa-mansory-item">
				    	<figure><img class="ansa-item-img img-3" src="https://i.ibb.co/9G432QJ/blend.jpg" class="ansa-thumb"></figure>
				    </div>
				</div> -->
			</div>	
		</div>
	</div>

1 Ответ

1 голос
/ 11 марта 2020

Я думаю, что вы не можете сделать это без ширины и высоты.

Если вы хотите иметь несколько изображений с разными размерами, контейнер может полагаться только на размер изображения или указать c ширину и высоту.

Вы можете обрезать все изображения до желаемого размера или Вы можете использовать JavaScript, чтобы определить фактический размер изображения, а затем уменьшить или увеличить его, а также установить контейнер в портретную или альбомную ориентацию.

Вот простое решение jQuery, которое проверяет размер изображения, а затем, если ширина больше чем высота, это помещает определенный класс c в это изображение.

$( window ).on( "load", function() {  
  $("img.ansa-item-img").each(function() {  
    var width = this.width,
        height = this.height;

    if(width > height) {
       $(this).addClass('landscape')
    } else (
      $(this).addClass('portrait')
    )
  });  
});

Просто добавьте стиль класса в файл CSS следующим образом:

.portrait {
  width: 150px;
  height: 350px;
}

.landscape {
  width: 350px;
  height: 150px;
}

Таким образом, вы можете загружать разные размеры, и он автоматически помещается в изображение в контейнере. и установите ориентацию.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...