2015-07-21 86 views
0

我試圖創建一個橫幅具有一些服務我公司提供不斷變化的,下面的圖片是正是我想它(桌面視圖),但是當我調整瀏覽器文本被推開在圖像下方,並且被頁面重疊的元素隱藏。橫幅圖片和文字調整不會對調整大小

我如何使它所以與瀏覽器的圖片和文字,並調整看起來它在桌面上一模一樣?

我就在這裏http://jsfiddle.net/b7a8cvLb/4/

我的CSS

.info_banner { 
background-color:white; 
max-width:1166px; 
margin:0 auto; 
padding: 5px 5px 0px 5px; 
text-align:center; 
font-size:1em; 
height:65px; 

} 

.info_block { 
display:inline-block; 
width:20%; 
border-right-style:solid; 
border-right-width:2px; 
border-right-color:#F8F8F8; 
height:65px; 
vertical-align: text-top; 
} 

.info_block img { 
max-width:100% !important; 
height:auto; 
display:inline-block; 
float:left; 
} 

.info_block h5 { 
height:100%; 
width:100%; 
margin:0; 
} 

創建了一個例子如果需要的話我可以將圖像顯示:在一定寬度的瀏覽器沒有,但我寧願避免做這個。

enter image description here

回答

0

我可以看到你的圖片已經被縮小,如果你想你的文字縮減太多,你需要使用media queries.

希望幫助步驟下來!