在CSS中縮放文本和圖像

我試圖縮放我的背景圖像以適應任何屏幕，並同時在圖像上寫入文本並使此縮放以適合屏幕大小。我不是程序員，所以我希望你能和我一起袒護。這是網站：www.beautebeaute.dk在CSS中縮放文本和圖像

我有在這個論壇搜索答案的地方的背景圖片。它的偉大工程與此代碼：

CSS

#imagescale {  
    width: 100%; 
    position: scroll; 
    left: 0px; 
    top: 0px; 
} 

.stretch { 
    width:100%; 
    height:100%; 
}

HTML：

<div id="imagescale"><img src="http://beautebeaute.dk/wp-content/uploads/2013/11/Topbilledeny.jpg" class="stretch" alt=""/>

但我似乎無法找出我怎麼能寫代碼的疊加將隨圖像一起縮放的文字。如果我使用指南that I found in this forum，它不會隨着網頁，手機等屏幕流動。您能幫忙嗎？

來源

2013-11-02 AllanFatum

你有沒有考慮使用CSS背景圖像，而不是一個HTML的形象？ –

爲什麼不將文本添加爲svg圖像並將其縮放？

來源

2013-11-02 16:43:56 Cozmoz

爲什麼涉及這麼複雜？ OP沒有提到SVG或這些行上的任何內容 –

我剛纔發現這是一種簡單的方法來讓文本與圖像並排放置。做一些研究，這將工作同樣好： http://css-tricks.com/viewport-sized-typography/ – Cozmoz

如果你想在div充滿整個視口，必須先設置

html, body { 
    height: 100%; 
}

然後你就可以給

#imagescale {  
    width: 100%; 
    height: 100%; 
}

與圖像填充它現在

#imagescale { 
    background-image: url(http://lorempixel.com/1200/1000); 
    background-repeat: no-repeat; 
    background-position: center top; 
}

，你可以將文本居中。一個解決方案是在這裏CSS技巧Centering in the Unknown

#imagescale { 
    text-align: center; 
} 

#imagescale:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
    margin-right: -0.25em; /* Adjusts for spacing */ 
}

查看全部JSFiddle

來源

2013-11-02 16:55:16

在CSS中縮放文本和圖像

回答

相關問題