无法在div中定位图像

Question

我使用instafeed.js从Instagram帐户中提取最近的3张图片。它将图像加载到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屏幕和（最小宽度：1440px）或为图像本身设置最大宽度。但是，如果您想让您的网站响应，则需要一段时间，而且您必须