宽度不能进行比例调整

我有一个狭窄的观点，我插入一些HTML。 每隔一段时间就有一张图片太宽，所以我一直在包装原始的HTML字符串，使用这个CSS来控制它：

<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或其他一样简单的东西？

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

---

更新：

使用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">

修改后，将宽度和高度添加到第一个图像链接

<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：

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

它的容器宽度属性是否设置真的没有什么区别。 我尝试了两种方法。

事实上，在这种情况下（链接），看起来图像首先被宽度和高度属性放大，然后宽度被CSS最大宽度缩小。 这导致了一个非常奇怪的影响。

---

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

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

height: auto修复比例。

---

这很容易，只需向父级添加一个宽度即可。

div
{
    width: 100px;
}

在这里演示。

---

我不确定我是否理解你的问题，但这是一个想法：

http://jsfiddle.net/FyC6r/4/

.mydiv
{
    width:200px;
    height:150px;
    border: 1px solid red;
}

.mydiv img 
{
    width:100%;
}

<div class="mydiv">
  <img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">
</div>

这样你就会有一个图像的大小成比例的调整取决于你首先需要什么，宽度或高度..只留下宽度100％的CSS这意味着图像将被调整大小以适应div的宽度和高度将被调整大小相同的时间作为宽度，所以规模将得到尊重。

好..如果想让它们根据宽度和高度进行调整，那么由于不同的比例会导致图像失真。 你可以使用img风格的宽度和高度来改变它们并且适合一个图像，但是当另一个图像被添加不同尺寸时，你会再次得到一个错误的显示图像。 我会去宽度来保持它的大小，因为在高度，屏幕下总是有空间:)

链接地址: http://www.djcxy.com/p/55617.html

上一篇: width not giving proportional resizing

下一篇: C# AppDomain sandbox security exception when subscribing to domain events