логика для динамического отображения изображений

Question

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

Адрес Fiddle.

Все изображения находятся в разделе статьи, но в первой статье используется один класс css, а второй - что-то другое.

<article class="idea col-xs-12 col-sm-6 col-lg-4"> 
    <div class="image"> 
    <a href="#"> 
     <img src="mygal/images/1.jpg" alt="" /> 
    </a> 
    <div class="ide"> 
     <a href="#"> 
     <p> 
      <strong>TTTTTTTTTT</strong> 
      <span class="name">/DDDDD</span> 
     </p> 
     </a> 
           </div> 
    </div><!-- /.image --> 
</article> 

Здесь ожидается выход.

Как я мог ожидать, производят вывод с помощью JavaScript. У меня есть код, который получает мне данные, но мне нужна логика о том, как привязывать данные для получения ожидаемого результата.

Answer 1

В данном примере сетки, похоже, что все изображения имеют одинаковую ширину. Я бы обернул изображения в элементе div и дал им фиксированную ширину и высоту. Вы можете установить ширину изображений на 100% для выравнивания с обернутыми div.