具有最大宽度/高度且没有 CSS 的 HTML 响应式图像答案

【问题标题】：Responsive image in HTML with max width/height and without CSS具有最大宽度/高度且没有 CSS 的 HTML 响应式图像
【发布时间】：2015-10-20 17:58:36
【问题描述】：

有没有办法使用响应式但具有最大宽度的 HTML 添加内嵌图像？

我知道我可以使用<img width="100%" /> 使其具有响应性，但这会导致图像大小调整为容器大小，我想为其设置最大宽度/大小。

这可能吗？我不想使用 CSS 的原因是因为在这种情况下，我无法编辑主/父 CSS，并且宁愿不使用内联 CSS。

谢谢。

【问题讨论】：

不。 CSS 提供了“响应式”功能
您可以尝试使用内联样式并使用关键字 !important，这可能会覆盖 CSS 规则
可以将max-width设置为img的容器
<img style="max-width:100%;">
感谢您的回复。只要图像的实际大小不大于我希望它出现在桌面/更大屏幕上的大小，就可以使用<img style="max-width:100%;">，这就是我要做的。

【解决方案1】：

我最常见的智能选择宽度的需求是将某些东西的大小设置为 100%，除非它变得太大。例如，同时指定宽度和最大宽度：

<img src="myimage.png" style="max-width:1000px; width:100%;">

那是 inline-CSS，原始问题指出是不需要的；然而，OP 然后选择了一个内联 CSS 的解决方案。

【讨论】：

【解决方案2】：

如果您不想设置百分比，请使用：

<img style="max-width: 200px;">

不过我喜欢这样设置：

<img style="max-width: calc(100% - 20px);">

通过这种方式，您可以将 img 设置为小于其容器的某个 px。任何一个都可以。

【讨论】：