blocks|key|3412004|text|如果你在移动设备上这样做，我建议调整服务器大小以节省下载大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3412005|关于后面的文本，您有没有更全面的测试用例来显示这个CSS应用到的实际文档？|3412006|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

If you do this for mobile devices I would recomend server resize to save download size.

Regarding the text that goes behind, do you have a more comprehensive testcase showing the actual document this CSS applies to?

blocks|key|5523790|text|如果你这样做，你最终会得到压缩的图像。我认为这是使用CSS所能达到的最佳效果：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5523791|#content+img+{
++++width:+100%25;
++++height:+auto;
++++max-width:+480px;
}|code-block|syntax|javascript|5523792|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You'll end up with squished images if you do that. I think this gives the best result you can achieve with CSS:

<pre><code>#content img {
 width: 100%;
 height: auto;
 max-width: 480px;
}
</code></pre>

blocks|key|2325461|text|我在我的页面中添加了这段代码，它正在工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2325462|img+{
++width:100%25;
++max-height+:+auto;
++max-width+:+480px;
}|code-block|syntax|javascript|2325463|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I added this code in my page and it's working:

<pre><code>img {
 width:100%;
 max-height : auto;
 max-width : 480px;
}
</code></pre>

blocks|key|5523822|text|你有没有尝试过对不同的屏幕尺寸使用不同的样式表？然后，您只需要为每种情况编写代码，然后加载所需的样式。如果您有其他样式需要根据大小进行更改，它也会派上用场。在移动网站上很有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5523823|<meta+content="width=device-width,+initial-scale=1.0"+name="viewport">|code-block|syntax|javascript|5523824|有助于确保它的伸缩性正确。不确定它会有多大的帮助，但希望这个链接能有所帮助。|5523825|CSS+trick+for+specific+style+sheet|offset|length|5523826|我也尝试过一些，如果你将图像设置为百分比，它似乎会起作用。我在文本的左边浮动了一个，在屏幕的50%25处，它重新调整了文本的大小。如果你需要我发布一个例子，尽管说。|5523827|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/resolution-specific-stylesheets/^0|0|0|0|0|Y|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@]|9|@$K|10|L|11|1|12]]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Have you tried using different style sheets for different screen sizes? Then you would just need to write the code for each situation and then load the needed style. It would also come in handy if you have other styles that need to change based on size. Very helpful on mobile sites. 

<pre><code>&lt;meta content="width=device-width, initial-scale=1.0" name="viewport"&gt;
</code></pre>

helps to make sure it scales right. Not sure how helpful it will be, but hope this link helps.

<a href="http://css-tricks.com/resolution-specific-stylesheets/" rel="nofollow">CSS trick for specific style sheet</a>

I've also played around a little, and it seems to work if you set the image as a percentage. I floated one to the left of text and at 50% of the screen and it re-sized text and all. If you need me to post an example, just ask.

blocks|key|2320806|text|使用@media手动更改移动设备、平板电脑或桌面的大小。顺便说一句，手机和平板电脑将会有风景和肖像。如果你使用google+chrome来检查，你可以更好地确定它。网站示例：Media+Queries:+How+to+target+desktop,+tablet+and+mobile?|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2320807|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile^0|2F|1K|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

use @media to do manual change by the mobile, tablet or desktop size.
by the way mobile and tablet will have landscape and portrait. if you using google chrome to check you can determine it better. sample of website : <a href="https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile">Media Queries: How to target desktop, tablet and mobile?</a>

I am using this code to auto resize images to the window size on a mobile page:

<pre><code>img {
 width:100%;
 max-height : auto;
 max-width : 480px;
}
</code></pre>

My intention is to show the image in the right size of the window on small screens and max 480px on bigger screens maintaining the ratio.

But for some reason i dont know when i use that code the text around the image goes behind it.

Theres a way to achieve this result using another method like Java or Jquery and avoid this problem?

Better way to auto resize images mantaning aspect ratio?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用以下代码自动调整图片大小以适应移动页面上的窗口大小：img {  width:100%;  max-height : auto;  max-width : 480px;}我的意图是在小屏幕上以合适的窗口大小显示图像，并在大屏幕上显示最大480px的图像，以保持该比例。但由于某些原因，我不知道当我使用该代码时，图像周围的文本会被隐藏在它后面。有没有办法用另一种方法，如Java或Jquery

问自动调整图像大小的更好方法是调整纵横比？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动调整图像大小的更好方法是调整纵横比？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自动调整图像大小的更好方法是调整纵横比？
EN