引導左，右頁邊距到圖像的邊緣

Question

我想有左，右頁邊距容器中取出內部的圖像：

CSS：

.container{ 
    padding: 20px; 
    background-color: #eee; 
    max-width: 600px; 
    min-height: 500px; 
    margin: 20px auto; 
} 

    .full-size{ 
     margin-left: -20px; 
     margin-right: -20px; 
     width: 100%; 
    } 

HTML：

<div id="content" class="container"> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
    <img class="img-responsive full-size" src="http://placehold.it/900x500"> 
</div> 

演示：http://www.bootply.com/0ElBn1DBBU

但我不能讓圖像成爲全尺寸和0邊距。圖像向左但不是全寬。

Answer 1

在.container類替換padding: 20px;與padding: 0;和.full-size類中刪除margin-left: -20px;和margin-right: -20px;。

這裏是CSS的樣子這些修改後：

.container{ 
     /*padding: 20px;*/ 
     background-color: #eee; 
     max-width: 600px; 
     min-height: 500px; 
     margin: 20px auto; 

     padding: 0; 
    } 

和：

.full-size{ 
     /*margin-left: -20px;*/ 
     /*margin-right: -20px;*/ 
     width: 100%; 
    } 

例子：http://www.bootply.com/Yuz0rsCbLV

Answer 2

容器類的填充，限制它。我會製作一個名爲image-container的獨立類，並用它包裝圖像。那麼利潤率將會產生影響。
<div class="image-container"> <img class="img-responsive full-size" src="http://placehold.it/900x500"> </div>

.image-container{ margin-left: -20px; margin-right: -20px; }

見這裏的一個例子。 http://www.bootply.com/661aOu5SKh

如果你想也卸下底部填充，加margin-bottom: -20px;

Answer 3

您的容器上導致所有的悲痛20像素填充。如果從容器類中刪除它，則根本不需要任何全尺寸的類。爲了改善文本的外觀添加填充到容器內的p標籤：

.container{ 
    padding: 0px; 
    background-color: #eee; 
    max-width: 600px; 
    min-height: 500px; 
    margin: 20px auto; 
} 

.container p { 
    padding: 20px; 
} 

.full-size{ 

}