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

问题描述

试图让图像标题在 contenteditable 中正确运行。我注意到的问题：

第一个“谷歌”图像是 50% 的原始大小 - 很好。
第二个“Google”图片位于“figure”标签内。问题 - “图形”框超出图像的宽度。我希望它与图像大小相同 - 自动调整图像大小。
第三个“谷歌”图片也在一个图形标签内，带有浮动：左。问题：图像大小发生变化。此外，当您输入更长的标题时，框会变得越来越宽 - 希望图形框保持与图像相同的宽度，并且较长的标题以相同的宽度自动换行而不是加宽，并且图像大小保持不变不变。
在 CSS 中尝试“inline-block”似乎无济于事。

<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>

标签： cssfigurecaptionfigcaption

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

问题描述

解决方案

推荐阅读