在CSS中缩放文本和图像 [英] Scaling text and image in CSS

查看:94
本文介绍了在CSS中缩放文本和图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图缩放我的背景图像以适应任何屏幕,同时在图像上书写文字并使其具有适合屏幕尺寸的缩放比例。我不是程序员,所以我希望你能和我一起袒护。这是网站:www.beautebeaute.dk

I'm trying to scale my background image to fit any screen and at the same time writing text over the image and having this scaling to fit the screen size as well. I am not a programmer, so I hope that you can bare with me. This is the site: www.beautebeaute.dk

通过在此论坛中搜索答案,我可以找到背景图片。这个代码很好用:

I have the background image in place by searching answers in this forum. It works great with this code:

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="" / >

但我似乎无法解决如何编写覆盖文本的代码,与图像一起缩放。如果我使用我在此论坛中找到的指南 ,它不会与网络,手机等屏幕流动。你能帮忙吗?

But I can't seem to work out how I can write a code for the overlaying text that will scale with the image. If I use the guide that I found in this forum, it will not flow with the screen on web, mobile etc. Can you help?

推荐答案

为什么不添加文本为一个SVG图像,并有它的规模?

Why not add the text as an svg image and have it scale?

这篇关于在CSS中缩放文本和图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆