CSS max-width 没有按比例调整大小答案

【问题标题】：CSS max-width not giving proportional resizingCSS max-width 没有按比例调整大小
【发布时间】：2019-10-20 15:55:49
【问题描述】：

我有一个狭隘的观点，我正在向其中插入一些 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 应用程序的 web 视图中。我不想编写代码来解析原始 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 最大宽度缩小。这导致了一个非常奇怪的效果。

【问题讨论】：

标签： resize css

【解决方案1】：

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

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

height: auto 固定比例。

【讨论】：

【解决方案2】：

真的很简单，给父级加个宽度就行了。

div
{
    width: 100px;
}

Demo here.

【讨论】：

谢谢，凯尔。这看起来很有希望，但在我尝试过之后，我发现它不起作用。我在关于我发现的问题中添加了更多细节。

【解决方案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 样式的宽度和高度来更改它们并适合一个图像，但是当添加另一个具有不同尺寸的图像时，您将再次获得错误的显示图像。我会选择宽度来保持它的大小，因为在高度上，屏幕下方总是有空间:)

【讨论】：

【解决方案4】：

**你应该添加 display: inline-block 和 overflow: scroll 使其工作**

for more examples click Here .

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

&lt;div class="demo"&gt;i'm resizeble&lt;/div&gt;

【讨论】：