緣陰性

我有這個（簡體）情況：緣陰性

<div class="page-content"> 
    <p>text</p> 
    <p><img src="" /></p> 
    <p>text</p> 
    <!-- ... --> 
</div>

和：

.page-content { 
    padding: 0 20px; 
} 

.page-content img { 
    display: block; 
    margin: 0 auto; 
    max-width: 100%; 
}

這樣一來，我一直都在我的.page-content填充div（其中包含比我在這裏複製的更多）。圖像不能超過頁面的寬度，減去填充。

它在任何屏幕尺寸的偉大工程。

實施例：

enter image description here

然而，我想使圖像全寬時，電話屏幕上（繞過父20像素填充）。

即：

enter image description here

如果家長（的<p>）有陰性切緣（margin: 0 -20px;），而是由傑基爾從降價文件生成的HTML文件，我可以解決我的問題，我不能在其中添加類。

我不能找到一個辦法做到這一點，除了刪除的.page-content填充和設置它在每一個孩子。我寧願不這樣做。

我不能設置一個固定的寬度要麼是因爲我想，要在每個屏幕尺寸的工作。

有沒有辦法來選擇CSS父？或者我不知道的另一個功能？

謝謝。

來源

2013-10-02 Matthieu Oger

u能控制IMG的來源，說在像 =到底添加的東西？「FFF」如果是檢查鏈接[link]（http://www.w3schools.com/cssref/css_selectors.asp ）請不要這樣做會停止圖像緩存 –

你已經回答了你自己的問題。刪除填充並將其設置在子元素上。（或者在子元素上使用保證金，因爲這是您真正需要的）這是最好的解決方案。

替代選擇：您可以在圖像上使用定位，例如position：absolute;這會將其從父項流中取出，因此忽略填充，但是您必須確切知道圖像需要去的位置。選項1好得多。

來源

2013-10-02 08:59:01

絕對定位對此是矯枉過正。 –

以及suggections上面你可以改變CSS相關連接設備上（不知道什麼樣的環境您使用），或者通過屏幕althought的寬度，你需要仔細考慮屏幕尺寸等。如果這樣的做法

ie
@media screen and（max-width：400px） { p {margin：0 -20px; } }

你可能想要比p更具體。

來源

2013-10-02 11:40:00 ConfusedShark

這就是問題所在，我無法添加類來定位此用例（我不一定是降價的作者）。 –

的行爲也以奇怪的方式。我試圖完成同樣的事情，但發現很困難。相反，我結束了一個div包裹的圖像，並添加盒大小：邊界盒和保證金：0 - @你的負利潤

<div><img /></div> 


div { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    margin: 0 -1rem; 
} 

div > img { 
    width: 100%; 
    margin: auto; 
}

來源

2015-04-09 16:54:38 amazingBastard

img { 
    width: calc(100% + 40px); 
    margin-left: calc(-20px); 
    margin-right: calc(-20px); 
}

我把計算的利潤率左&內對，因爲如果calc函數沒有被瀏覽器實現，它不會破壞設計。

來源

2015-10-14 09:39:38 Tibastral

是的！這是太棒了。 – philwilks

使用the accepted solution from here對於中添加一個@media查詢到大屏幕顯示器，以保持利潤率：

@media screen and (min-width: 600px) { 
    .img-wrapper { 
    margin: 0 0; 
    } 
}

而且，把width=100%;你的IMG。

來源

2016-08-29 15:16:24 art1fa

回答

相關問題