圖片沒有響應

-2

我試圖讓我的標誌變得快速響應。這裏有一個小提琴，並標識有響應程度，但我的本地機器上它不響應...... https://jsfiddle.net/jfzqbshs/圖片沒有響應

這裏有一個GIF圖片，展示我的本地機器 GIF

HTML

<div class="header"> 
    <img id="logo" src="assets/logo.png"> 
</div> <!--/ header -->

CSS

.header{ 
    width:100%; 
    box-sizing: border-box; 
    padding-left: 1%; 
    padding-top:1%; 
    padding-bottom: 1%; 
    border-bottom: 1px solid #474547; 
} 
#logo { 
    display: block; 
    max-width: 100%; 
    height: auto; 
}

謝謝。

來源

2017-07-16 Marwan AK

我們不能排除故障代碼那已經在工作了。你需要給我們足夠的信息來複制你得到的錯誤。否則，這可以通過*關閉。這個問題是由於無法再現的問題或簡單的印刷錯誤引起的。*關閉原因。 – BSMP

這就是問題所在......我複製並粘貼了與問題相關的所有內容。這就是與之相關的所有HTML和CSS。另外，如果你注意到小提琴的響應性看起來很奇怪，不是嗎？也許它是關於它自我形象的？因爲我試過另一張圖片，並且縮放比例很好。 –

但我們無法解決我們無法看到的問題。如果代碼沒有任何問題，別人怎麼能告訴你你發佈的代碼有什麼問題？（我沒有看到小提琴有什麼奇怪之處，反正這也不是你的問題。） – BSMP

您的圖片相當小，因此如果您使用max-width，它將永遠達不到100％的寬度。

您可以使用這樣的事情：

#logo { 
    width: 25%; 
    min-width: 100px; 
    height: auto; 
}

這使得它負責（25％的寬度），但也限制了它，所以它永遠不會小於100px的寬度。你還可以添加一個max-width（像素），以避免它（質量差，這將導致圖像模糊）變得大於它實際上是

.header { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    padding-left: 1%; 
 
    padding-top: 1%; 
 
    padding-bottom: 1%; 
 
    border-bottom: 1px solid #474547; 
 
} 
 

 
#logo { 
 
    width: 25%; 
 
    min-width: 100px; 
 
    height: auto; 
 
}

<div class="header"> 
 
    <img id="logo" src="http://placehold.it/200x60/eb7"> 
 
</div> 
 
<!--/ header -->

來源

2017-07-16 14:59:34 Johannes

最好的解決方案！簡單的普通CSS。 – hansTheFranz

您使用引導程序或其他CSS庫嗎？也許你的img被覆蓋在你的代碼的某個地方？試試這個檢查：

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

甚至：

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

，並把在CSS文件的底部。

來源

2017-07-16 14:52:01 Wordica

圖片沒有響應

回答

相關問題