如何创建HTML网页,自动调整图像到不同的手机屏幕大小?图像、手机屏幕、大小、不同

2023-09-05 23:14:26 作者:峩是采花贼

我想创造一些将要在不同的移动设备上显示的HTML页面。我希望他们能够自动适应不同的手机屏幕大小。

I want to create some HTML pages which will be displayed on different mobile devices. I want them to automatically adjust to different mobile screen sizes.

在HTML页面包含文本和图像。该图像可以是大于600x450,但如果移动屏幕(例如)280x320然后将图像应该自动调整自己的尺寸以适应

The HTML pages include text and images. The images may be bigger than 600x450, but if the mobile screen is (for example) 280x320 then the images should automatically adjust their size to fit.

我怎样才能做到这一点?

How can I do this?

推荐答案

如果你谈论的是字面上只包含文本和图像的网页,那么我认为你需要做的,每个HTML页面是这样的:

If the pages you're talking about literally just contain text and images, then I think all you need to do in each HTML page is this:

将此视meta标签在&LT ; HEAD> 标签:

<meta name="viewport" content="width=device-width">

这应该使页面呈现在一个合理的规模。

This should make the page render at a reasonable size.

将此&LT;风格&GT; 标记中的&LT; HEAD&GT; 标签:

<style>
img {
    max-width: 100%;
}
</style>

我的认为的,这将确保所有图像不渲染速度比应用程序的web视图的视任何更宽。

I think this will make sure all images don't render any wider than the app's webview's viewport.

(如果还是不行,请尝试宽度:100%; 而不是一定会令所有的图像一样宽的视口,因此没有更广泛。 。)

(If that doesn't work, try width: 100%; instead. That'll definitely make all images be as wide as the viewport, and therefore no wider.)

不过,你的问题是有点太笼统:我们最终可能会写一本书涵盖了一切准备。你能不能说得具体到code,你实际上是在干什么?

However, your question is a bit too general: we could end up writing a book covering all the possibilities. Could you make it more specific to the code you're actually working on?