響應調整圖片大小問題

不知道爲什麼頭圖像不正確調整。見http://www.insidemarketblog.com 響應調整圖片大小問題

我以爲我把它正確的，但標題圖片不會調整針對移動設備。有什麼建議麼？

CSS：

#thesis_header_image { 
    height: auto; 
    max-width: 100%; 
} 
.container_header_image { 
    width: 400px; 
}

HTML：從HTML

<div id="wrap"> 
<div class="container_header_image"> 
<div class="text_box"> 
<a href="http://www.insidemarketblog.com"> 
<img id="thesis_header_image" width="400" height="87" src="http://www.insidemarketblog.com/wp-content/uploads/2014/03/logo_header1.png" alt="Inside Market Strategy header image" title="click to return home"> 
</a> 
</div> 
</div>

來源

2014-04-19 user3117275

在css.css的底部添加以下代碼

@media screen and (max-width:400px) { 
    #wrap{ 
     width: auto; 
    } 
}

這將設置包與在移動的汽車，否則會留下860px。

來源

2014-04-19 06:05:30

不錯的解決方案，雖然我會選擇400或更高的值。大多數移動設備都具有該分辨率，並且標題圖像爲400像素，因此，只要窗口小於此大小，就可以調整其大小。 – GolezTrol

@GolezTrol是正確的，我已經更新我的答案。 –

就像一個魅力!!!!!!謝謝。 – user3117275

刪除寬度和高度。 ~~HTML優先於您在CSS中定義的任何內容。~~

編輯：

這是一個流體溶液。

HTML

<div id="wrap"> 
    <div class="container-header-image"> 
     <a href="http://www.insidemarketblog.com"> 
     <img id="header-image" src="http://www.insidemarketblog.com/wp-content/uploads/2014/03/logo_header1.png" alt="Inside Market Strategy header image" title="click to return home"> 
     </a> 
    </div> 
</div>

CSS

#wrap{ 
    width: 100%; 
    background: orange; 
} 

.container-header-image{ 
    max-width: 400px; 
} 

#header-image { 
    width: 100%; 
}

http://jsfiddle.net/dustindowell/W78b3/

來源

2014-04-19 06:03:37

試過了。不起作用。另外，文章中的'SEO'圖片也有寬度和高度。而你的陳述是不正確的。內聯*樣式屬性*優先於您在CSS中定義的樣式。在這種情況下，寬度和高度屬性被指定，這對於'img'元素是很常見的。 – GolezTrol

你說得對。我已經更新了我的答案。 –

添加這些樣式

media="screen, projection" 
@media (max-width: 450px) 
.header { 
    padding-right: 0; 
    padding-left: 0; 

#wrap { 
    width: 100%; 
} 

.container_header_image { 
    width: 100%; 
} 

#thesis_header_image { 
width: 100% !important; 
max-width: 400px; 
height: auto; 
} 

}

來源

2014-04-19 06:09:11 4dgaurav

你應該改變容器的寬度。你甚至不需要media查詢。

#thesis_header_image { 
    height: auto; 
    max-width: 100%; 
} 
.container_header_image { 
    width: 100%; 
}

請檢查fiddle

來源

2014-04-19 06:10:54 Parixit

這個解決方案的唯一問題是它將圖像拉伸到860像素的100％，並且我希望圖像初始爲400寬度。我實施了這個改變，你可以看到結果。 – user3117275

@ user3117275更新了答案。現在檢查。我把這個圖像縮放到了全尺寸。但恢復了它。 – Parixit

感謝您的更新。 – user3117275

修改CSS這個

media="screen, projection" 
@media screen and (max-width: 400px) 
#wrap, .container_header_image { 
width: auto; 
}

來源

2014-04-19 06:16:21 krish

響應調整圖片大小問題

回答

相關問題