圖像沒有調整響應式設計大小

我使用的是Wordpress Twenty Twelve主題中的小孩，當我縮小屏幕時，圖像不會調整大小。我遇到的頁面是：圖像沒有調整響應式設計大小

http://69.195.124.68/~discowv9/?page_id=146

如果縮小屏幕的寬度，您將看到圖像不會改變大小。通常，WP中的這個主題會自動調整圖像大小。我似乎無法找到不允許調整大小的CSS代碼。

非常感謝您的幫助。

我試圖張貼屏幕截圖，但我的聲望不夠高。這是高爾夫球杆手柄拍攝前後的圖像。

<div style="white-space:nowrap;"><img class="wp-image-438 alignleft" src="http://69.195.124.68/~discowv9/wp-content/uploads/2013/04/Cleaning-Process-of-Club-Grip.jpg" alt="Cleaning a Golf Club Grip with Club Care" style="line-height: 1.714285714; font-size: 1rem;"></img></div> 

.entry-content img, .comment-content img, .widget img { 
    max-width: 100%; 
} 
img[class*="align"], img[class*="wp-image-"], img[class*="attachment-"] { 
    height: auto; 
} 
img.size-full, img.size-large, img.header-image, img.wp-post-image { 
    height: auto; 
    max-width: 100%; 
}

來源

2013-04-04 MattM

你是什麼意思？ – Lemurr 2013-04-04 02:12:47

將相關代碼添加到問題將有所幫助。突出顯示問題區域的截圖也會有所幫助。 – 2013-04-04 02:19:17

添加代碼。希望能幫助到你。 – MattM 2013-04-04 04:31:03

實際上，圖像將調整大小，當放置圖像的容器將調整大小，如果您使用div或任何其他元素確保它也調整大小...如果您試圖爲響應設計你可以使用CSS3媒體查詢 ...我的建議是因爲您的網站是您的網站是動態的WordPress的...確保這些媒體查詢將有助於...

來源

2013-04-04 05:37:11 SaurabhLP

以及當您使用這些媒體查詢使其響應時，使您的圖像成爲css精靈，以便相應地縮放。我喜歡這個答案+給你@SaurabhLP – 2013-04-04 08:20:27

謝謝Saurabh。添加寬度：100％到＃內容效果很好！ – MattM 2013-04-04 21:58:09

-1

使用白色空間：nowrap;在你的分區

來源

2013-04-04 02:14:35

我試圖用這段代碼把它包裝在一個div中，但它沒有工作。我應該把它放入圖像代碼本身嗎？ – MattM 2013-04-04 04:30:20

我hink SAURABH是正確的。當父元素不可調整大小時，我們如何期望它的孩子可以調整大小。試着讓你的＃內容被調整大小。以百分比給它的寬度。它會讓你的圖像自動響應。希望它可以幫助你。

#content { 
float: left; 
padding-right: 1em; 
width: 100%; 
}

來源

2013-04-04 18:55:33

如果我有代表+1，我會。感謝您提供代碼！ – MattM 2013-04-05 22:14:07

它的好朋友。任何時候 – 2013-04-05 23:15:53

圖像沒有調整響應式設計大小

回答

相關問題