如何在不更改 img 标签的情况下将图像放入 div 中？答案

【问题标题】：How to fit an image inside a div without changing the img tag?如何在不更改 img 标签的情况下将图像放入 div 中？
【发布时间】：2017-07-04 08:15:41
【问题描述】：

我目前正在尝试在基于富文本的模板系统中实现这一目标，在该系统中，用户可以将图像切换为任意大小的另一个图像。

系统只允许我内联样式，这样<img src="path/image.jpg" style="max-width: 100%; max-height: 100%;" > 工作正常，直到用户将图像切换到另一个图像，删除任何以前的样式，替换为具有自己宽度和高度的新<img>。

我已经尝试过使用 <style></style> 和 <style type="text/css"></style> 和 <link>，但系统会忽略它。

我可以在不更改 img 标签的情况下解决这个内联问题吗？这是今天的代码：

<div style="float: left; text-align: center; display:inline-block; margin: 0 auto; width:450px;height:450px;">
<img src="http://i.imgur.com/cnI4YIs.png" width="450px" height="450px" alt="" />
</div>

【问题讨论】：

你知道javascript是否有效吗？
如果你不能放任何CSS，你必须有一个JS解决方案，在内容改变后内联样式。当图像更改为内联 max-width 和 max-height 样式时，可能会触发一个事件？

标签： html css image

【解决方案1】：

谢谢，但现在我认为它以自己的方式很好。我不确定它是否适用于 JS，但似乎当我在模板内进行更改时，然后我复制代码以粘贴到将发布模板广告的实际网站（也适用于富文本输入)，更改会自动内联。

换句话说，我将<style></style>元素保留在模板系统中，保存在发布系统中，避免对其进行任何更改。

我不知道如何解释这一点，也不知道为什么会这样，但它仍然有效......

PS：两个站点都使用 TinyMCE 来编辑代码，因此寻找有关 TinyMCE 配置的答案可能很有用（例如启用标签 <style>）。当然，前提是您具有管理员访问权限。我没有。

【讨论】：