在div內定位圖像的問題

我使用instafeed.js從instagram帳戶中提取了3個最新的圖像。它將圖像加載到一個div中，我設法按照他們需要的方式設置圖像的樣式。但問題是他們設置的方式非常靜態。如果我在更大的屏幕上查看頁面，則圖像會排成三列，而且位置不正確。此外，如果其中一幅圖像比寬高，則不會與左側大圖像的底部對齊，看起來很奇怪。我在下面的屏幕截圖中展示了它在我的macbook上的外觀（無論屏幕或圖片大小如何，它總是需要看起來像），以及在更大的屏幕上顯示它的另一個屏幕截圖。任何幫助非常感謝！在div內定位圖像的問題

它所需要的樣子總是：

在更大的屏幕尺寸會發生什麼：

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; 
}

來源

2015-12-09 MrDevRI

-1

好吧，你需要做的是叫做響應式設計。現在你只有固定的寬度，自然不能放大。如果你想爲它們設置特定的顯示寬度，我建議在你的樣式表中使用@media來特定地討論更大的屏幕。

然後，您可以按百分比調整圖像大小，以確保它們可以放大。但是在一個特別寬的寬度之後，我會建議停止縮放，因爲你的圖像只有有限的分辨率。要設置樣式，您可以使用@media屏幕和（最小寬度：1440px），或者爲圖像本身設置最大寬度。但是，如果你想讓你的網站響應，它將需要一段時間，你必須

來源

2015-12-09 17:12:42

歡迎來到堆棧溢出！ **這真的是一個評論，而不是一個答案。**我很欣賞你可能還沒有足夠的聲望留下評論，但請不要使用答案系統作爲替代。獲得聲譽相當容易，只需要您一點點努力。謝謝！ –

在div內定位圖像的問題

回答

相關問題