Неполадки позиционирования изображений в div

Question

Я использовал instafeed.js, чтобы вытащить 3 последних изображения из учетной записи instagram. Он загружает изображения в div, и мне удалось стилизовать изображения так, как они должны быть. Проблема состоит в том, что они так, как я ее настраивал, довольно статичны. Если я просматриваю страницу на большом экране, изображения находятся в ряду из трех и неправильно расположены. Кроме того, если одно из изображений более широкое, чем высокое, оно не будет выравниваться с нижней частью большого изображения слева и выглядеть странно. Я опубликовал скриншот ниже о том, как он выглядит на моем macbook (это то, что он всегда должен выглядеть независимо от размера экрана или изображения), и еще один снимок экрана о том, как он выглядит на большом экране. Любая помощь очень ценится!

Что нужно выглядеть всегда:

Что происходит в большем размере экрана:

Instafeed.js:

var feed = new Instafeed ({ 
    get: "user", 
    userId: "1957779802", 
    limit: 3, 
    sortBy: "most-recent", 
    resolution: "standard_resolution", 
    template: '<div class="img"><a href="{{link}}"><img src="{{image}}" /></a></div>', 
    accessToken: "1957779802.bef71cd.f6782544ba674fc3af9dddb2fec415fe" 
    }); 
    feed.run(); 

HTML:

<div class="col2"> 

     <div id="instafeed"></div> 

     <div class="acell"> 
     <div class="contentbox"> 
      <a href="https://www.youtube.com/channel/UCQEXfLzrNpxe7AZme3dTP0w" target="_blank"><img class="yt-bg" src="<?php bloginfo('stylesheet_directory'); ?>/images/youtube-img.jpg" alt="Youtube" /><span class="covered"><div class="play"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/play-img.png"></img></div><div class="text"><h3>Press Play!</h3><p>Watch clips on our YouTube channel.</p></div></span></a> 
     </div> 
     </div> 
    </div> 

CSS:

.social-container .row1 .col2 .instafeed { 
    width: 100%; 
    height: auto; 
} 

.social-container .row1 .col2 .img { 
    margin: 5px; 
    height: auto; 
    width: auto; 
    float: left; 
    text-align: center; 
} 

.social-container .row1 .col2 .img a img { 
    display: inline; 
    border: 1px solid #ffffff; 
} 

.social-container .row1 .col2 .img a img { 
    width: 150px; 
    height: 152px; 
} 

.social-container .row1 .col2 .img:first-child { 
    margin-right: 30px 
} 

.social-container .row1 .col2 .img:first-child a img { 
    width: 330px; 
    height: 320px; 
} 

Answer 1

хорошо, что вам нужно сделать, называется отзывчивым дизайном. Прямо сейчас у вас есть только фиксированная ширина, которая, естественно, не может масштабироваться. Если вы хотите стилизовать их для определенной ширины экрана, я бы рекомендовал использовать @media в вашей таблице стилей, чтобы говорить конкретно о больших экранах.

Затем вы можете увеличить ваши изображения в процентах, чтобы убедиться, что они увеличиваются. Но после одной конкретной большой ширины я бы рекомендовал остановить масштабирование, потому что ваши изображения имеют ограниченное разрешение. Для стиля вы можете либо работать с экраном @media, либо (min-width: 1440px) или установить максимальную ширину самого изображения. Но если вы хотите, чтобы ваш сайт реагировал, это займет некоторое время, и вам нужно будет