Question

我有一个狭隘的观点，我正在插入一些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%;}

是否设置了容器宽度属性确实没有任何区别。我试过两种方式。

事实上，在this case (link)中，看起来图像首先按宽度和高度属性放大，然后宽度按CSS最大宽度缩小。这会产生一种非常奇怪的效果。

Answer 1

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

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

height: auto修正比例。

Answer 2

这很简单，只需向父母添加宽度。

div
{
    width: 100px;
}

Demo here

Answer 3

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

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>

通过这种方式，您将按比例调整图像大小取决于您首先需要的宽度或高度..在css中仅留下宽度100％这意味着图像将调整大小以适应div的宽度和高度将调整大小与宽度相同的时间，因此将遵守比例。

嗯..如果希望它们按宽度和高度调整大小，那么由于尺度不同，您将会出现图像失真。您可以使用img样式的宽度和高度来更改它们并适合一个图像，但是当另一个图像添加不同的尺寸时，您将再次显示错误的图像。我会去宽度来保持它的大小调整，因为在高度，屏幕下总是有空间：）

Answer 4

**您应该添加显示：内联块和溢出：滚动以使其起作用**

for more examples click Here .

.demo{display: inline-block;
   max-width:380px;
   min-width: 220px;
   min-height: 160px;
   resize: both;
   overflow: scroll;};

<div class="demo">i'm resizeble</div>

CSS max-width没有给出比例调整大小

4 个答案: