如何使圖像響應，最大寬度不起作用

我正在嘗試使圖像響應並且max-width由於某種原因而不起作用。在不到499像素的情況下，圖像在右側被切斷。網址：http://boasish.com 如何使圖像響應，最大寬度不起作用

/*** Images */ 
img { 
    height: auto; 
    max-width: 100%; 
}

來源

2014-10-26 k65

該網站上的圖片是響應式的。 – rfj001 2014-10-26 20:38:16

你使用的CSS或最大寬度：500px？如果你使用它，在你的問題中，它會起作用。 – Christina 2014-10-26 20:41:32

@ rfj001低於499px時，圖像在右側被切斷。 – k65 2014-10-26 20:42:18

一些你的div得到width: 510px財產。例如你的<div id="attachment_2469">。我不確定你是否在那裏使用一些腳本，但是嘗試刪除這個屬性。如果你不能，你可能想使用!important，這是不好的做法。

試試這個代碼：

.wp-caption { 
    width:100% !important; 
} 

a img { 
    width:100% // sets responsive width 
}

Remeber，如果你不使用!important

來源

2014-10-26 20:47:52 Kamil

嘗試將該類添加到img標籤：

.img-responsive { 
    width: 100%; 
    display: block; 
    height: auto; 
}

來源

2014-10-26 20:41:29

在小於499像素的情況下，圖像仍然在右側被切斷。 – k65 2014-10-26 20:47:01

@ k65首先爲所有，與類內容的主要標記有此css： .content { \t寬度：500px; \t max-width：100％; } 將其轉換爲： .content { \t max-width：500px; \t寬度：100％; } 隨着JS你正在申請類「wp-caption aligncenter」寬度：510px。它比父div更大。嘗試將其設置爲寬度：100％; – 2014-10-26 21:26:03

這個CSS類我通常使用：

/*makes an image responsive*/ 
.responsive-image{ 

    display: block; 
    height: auto; 
    max-width:100%; 
    width:100%; 

}

這裏是一個鏈接小提琴我創建的：

http://jsfiddle.net/larryjoelane/ar6bwpgf/

來源

2014-10-26 20:51:57

如何使圖像響應，最大寬度不起作用

回答

相關問題