CSS的最大宽度不给比例调整 [英] CSS max-width not giving proportional resizing

问题描述

我在狭窄的视野中插入了一些HTML。偶尔会有一个图像过宽，因此我一直在包装原始HTML字符串，并使用此CSS对其进行控制：

I have a narrow view that I am inserting some HTML into. Every once in awhile there is an image that is too wide, so I have been wrapping the original HTML string, using this CSS to keep it under control:

<style type="text/css">p{max-width:100%;}img {max-width:100%;}</style>
<div style=\"word-wrap:break-word\">
.
. ...original HTML inside the div wrapper...
.
</div>

但是它不能按比例缩放图像的宽度和高度，所以结果是图像失真。还有其他我可以做的事情，最好是CSS或同样简单的事情？

But it doesn't scale the width and height of the images proportionally, so the result is a very distorted image. Is there something else I can do, preferably with CSS or something equally as easy?

这是嵌入在iOS应用程序的webview中。我不想编写代码来解析原始HTML并查找图像。我需要一个简单的解决方案，利用本机UIView类支持的方法。

This is embedded inside a webview in an iOS application. I don't want write code to parse through the original HTML and look for images. I need a simple solution that takes advantage of the methods that are supported by the native UIView class.

更新：

使用以下答案中的示例来自Kyle的问题，我认为问题在于嵌入了width和height属性的图像：

Using the example in the answer below from Kyle, I think the problem is occurring with images that have embedded width and height attributes:

Kyle的示例：

<div style="word-wrap:break-word">
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">
</div>
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">

已修改，在第一个图像链接中添加了宽度和高度

Modified, with width and height added to the first image link

<div style="word-wrap:break-word">
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png" WIDTH="100%" HEIGHT="100%">
</div>
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">

两者均使用以下CSS：

Both using this CSS:

div {width:100px;}
p{max-width:100%;}
img{max-width:100%;}

无论是否设置了容器宽度属性，都没有任何区别。我尝试了两种方式。

It really isn't making any difference whether the container width attribute is set or not. I tried it both ways.

事实上，在这种情况（链接），看起来图像首先通过width和height属性放大，然后通过CSS max-width缩小宽度。

As a matter of fact, in this case (link) it looks like the image is first scaled up by the width and height attributes, followed by the width being scaled down by the CSS max-width. This leads a a very bizarre effect.

推荐答案

要保持正确的比例，请使用：

To maintain the right proportions use:

img {
  max-width: 100%;
  height: auto;
}

高度：自动确定比例。

这篇关于CSS的最大宽度不给比例调整的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！