強制顯示內聯響應圖像

我需要顯示圖像5x3的網格。無論屏幕分辨率如何，此網格都需要保持相同的格式和大小。圖像本身將作出響應調整。強制顯示內聯響應圖像

我有這樣顯示在inline-block的圖像列表：

<div class="gridView"> 
    <ul> 
    <li> 
     <img src=""> 
    </li> 

    <li> 
     <img src=""> 
    </li> 

    <li> 
     <img src=""> 
    </li> 
    </ul> 
</div>

的CSS是這樣的：

.gridView { 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 1200px; 
    text-align: center; 
    width: 100%; 
} 

.gridView ul li { 
    height: 100%; 
    max-height: 150px; 
    max-width: 200px; 
    width: 100%; 
}

現在當我調整電網沒有按窗口」保持它的大小不變。如何確保網格保持不變，但只有圖像自身調整大小？

來源

2013-02-11 user2028856

爲什麼它不起作用，因爲'width：100％'可以適用於小於1200px的任何尺寸，因此當寬度小於1200px時它會繼續調整尺寸。如果你想讓它保持靜態，那麼使它成爲'width：1200px;'並且擺脫'max-width'。 – KBN 2013-02-11 14:08:07

如果你想保持的佈局結構相同，如：

[x] [x] [x] [x] [x] 

[x] [x] [x] [x] [x] 

[x] [x] [x] [x] [x]

然後，你將不需要液體電網系統，但液體的圖像，而不是。我會做的是以下內容：更改.gridView ul li樣式，以便代替最大高度和寬度，設置簡單的高度和寬度聲明。

.gridView ul li { 
height: 150px; 
width: 200px; 
}

然後添加圖像類，使圖像響應：

.img { 
max-width: 100% 
height: auto; 
}

當然，圖像文件大小應爲150像素X 200像素他們最大。

這樣，當您的瀏覽器寬度變小並且圖像將變小以適應網格時，您的網格不會摺疊。

希望這會有所幫助！

來源

2013-02-11 14:15:43

事情是，當我分配寬度：1200px到我的容器，調整窗口的大小時，網格變得黯然失色，圖像不會自行調整大小。 – user2028856 2013-02-11 14:18:27

我們來創建一個jFiddle。發佈你現在的代碼。我們將顯示顏色塊，而不是圖像。你會看到的。 – 2013-02-11 14:19:48

嗯，你的意思是現在的代碼發佈到jfiddle？圖像是通過WordPress的動態生成，如果我只複製它的一部分，它不會加載圖像 – user2028856 2013-02-11 14:22:45

寬度：100％;將總是改變元素相對於父元素/窗口的大小。對於固定寬度，您需要固定寬度。就這麼簡單像：

width: 1200px;

來源

2013-02-11 14:13:52 AnilkaBobo

事情是，當我分配寬度：1200px時，調整窗口大小時，網格會變得黯然失色，圖像不會自行調整大小。 – user2028856 2013-02-11 14:17:23

很難想象你的意思，但我認爲，圖像不會自動調整大小，因爲元素只能相對於父元素調整大小。只要您的一些父元素將被修復，一切都將被修復。至少用CSS只是。 JS也許可以處理它 – AnilkaBobo 2013-02-11 14:28:41

這不是resize部分，不適合我，圖像調整大小很好。但是，它是有問題的父容器。我應該改變這個問題，容器不會強制保持相同的佈局。而不是保持5x3，然後強制圖像調整大小，佈局變爲4x5，然後3x6等，直到它的1x7。我需要它保持5x3所有的方式 – user2028856 2013-02-11 14:42:01

強制顯示內聯響應圖像

回答

相關問題