CSS並不適用於圖像

試圖讓CSS來適用於包含如下的圖像（我已刪除了其他HTML代碼，以簡化IT）：CSS並不適用於圖像

<div class="wrap"> 
<main> 
    <article> 
    <img src="images/forest.jpeg" width="800px"> 
    </article> 
</main> 
</div>

目前試圖按如下方式應用CSS：

.wrap img { 
    max-width: 100%; 
}

來源

2016-11-04 design-wizard

你想要什麼輸出。它已經適用於img –

它正在工作。 –

'max-width'對圖像沒有太大的作用，它就像一個寬度不應超過100％的條件。如果您試圖將img的寬度設置爲100％，則必須將寬度設置爲100％，否則請告訴我們您期望看到什麼，以及您看到了什麼。 –

外觀的CSS確實APPY這裏

.wrap img{ 
 
    height: 400px; 
 
    border: 5px solid black; 
 
    border-radius: 10px; 
 
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5); 
 
    max-width: 100%; 
 
}

<div class="wrap"> 
 
<main> 
 
    <article> 
 
    <img src="http://sd.keepcalm-o-matic.co.uk/i-w600/keep-calm-400-level-loading-1.jpg" /> 
 
    </article> 
 
</main> 
 
</div>

來源

2016-11-04 06:20:43 Rahul

它似乎仍然不適用於我的圖像。如果它有幫助'.wrap'是flex，所以它'主要'和'文章' –

@設計嚮導我試着用flex，它也適用於我，你的CSS文件正確鏈接到您的HTML，你有檢查通過檢查元素 – Rahul

我所有其他的樣式都可以正常工作，但它不適用於特定的img。 –

因爲內聯css比其他人擁有更高的優先級。改變它想：

<img src="images/forest.jpeg"> 

.wrap img { 
    width:800px; 
    max-width: 100%; 
}

來源

2016-11-04 06:18:23 wscourge

快速修復

.wrap > main > article > img{max-width: 100% !important;}

來源

2016-11-04 06:21:33

這不會起作用，因爲.wrap在他的情況下不是img的直接父母。 – wscourge

hmmm ..沒錯，我會編輯修正。 –

不過，只需要做.wrap img {// style}就足夠了，不需要僞選擇器。 – wscourge

CSS並不適用於圖像

回答

相關問題