带标题的图像 - “图形”框不适应图像大小，更改图像大小，长标题不换行，

问题描述

试图让图片说明在 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 (将#修改为@）

caption figcaption figure

带标题的图像 - “图形”框不适应图像大小，更改图像大小，长标题不换行，

问题描述

解决方法

相关问答