如何解决带标题的图像 - “图形”框不适应图像大小，更改图像大小，长标题不换行，
试图让图片说明在 contenteditable 中正确运行。我注意到的问题：
-
第一个“Google”图片是原始尺寸的 50% - 很好。
-
第二个“Google”图片位于“figure”标签内。问题 - “图形”框超出了图像的宽度。我希望它与图像大小相同 - 自动调整图像大小。
-
第三个“Google”图像也在一个图形标签内，带有浮动：左。问题：图像大小发生变化。此外，当您输入更长的标题时，框只会变得越来越宽 - 希望图形框与图像保持相同的宽度，并且更长的标题以相同的宽度换行而不是加宽，并且图像大小保持不变不变。
-
在 CSS 中尝试“内联块”似乎无济于事。
这是 fiddle。
<html>
<head>
<style>
figure {
//display: inline-block;
border: 1px dotted gray;
}
figure img {
//vertical-align: top;
}
figure figcaption {
border: 1px dotted blue;
text-align: center;
}
</style>
</head>
<body style="max-width:700px;">
<div class="content-area" style="border:1px solid">
<div contenteditable="">
<p style="text-align: center;">Welcome to my <b>WYSIWYG</b> Editor</p>
<img src="http://www.google.com.br/images/srpr/logo3w.png" style="width: 50%;border: 5px solid;">
<figure>
<img src="http://www.google.com.br/images/srpr/logo3w.png" style="width: 50%;border: 5px solid;">
<figcaption>Caption 1</figcaption>
</figure>
<br>
<figure style="float:left">
<img src="http://www.google.com.br/images/srpr/logo3w.png" style="width: 50%;border: 5px solid;">
<figcaption>Caption 1 Caption 1 Caption 1 Caption 1 Caption 1</figcaption>
</figure>
<p>Queso camembert de normandie danish fontina. Port-salut parmesan cheese strings cheese and biscuits danish
fontina roquefort port-salut danish fontina. Lancashire rubber cheese ricotta camembert de normandie squirty
cheese goat say cheese emmental. Stilton stinking bishop everyone loves manchego who moved my cheese manchego
boursin queso. Babybel mascarpone cheeseburger cut the cheese.
Goat danish fontina pepper jack. Squirty cheese gouda parmesan goat say cheese melted cheese cheesecake
who moved my cheese. When the cheese comes out everybody's happy babybel croque monsieur jarlsberg chalk
and cheese cow the big cheese paneer. Rubber cheese cheesy feet bavarian bergkase say cheese cheese and
biscuits babybel monterey jack feta. Squirty cheese squirty cheese mozzarella fondue.
</p>
</div>
</div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。