Изображение с подписью - поле "цифра" не адаптируется к размеру изображения, меняет размер изображения, длинные подписи не переносятся,
Попытка заставить подписи к изображениям работать правильно внутри contenteditable. Проблемы, которые я замечаю:
Первое изображение "Google" имеет исходный размер в размере 50% - отлично.
Второе изображение «Google» находится внутри тега «figure». Проблема. Поле «цифра» выходит за пределы ширины изображения. Я хотел бы, чтобы он был того же размера, что и изображение - для автоматического размера изображения.
Третье изображение «Google» также находится внутри тега figure с float:left. Проблемы: Изменяется размер изображения. Кроме того, когда вы вводите более длинную подпись, поле становится все шире и шире — хотелось бы, чтобы поле рисунка сохраняло ту же ширину, что и изображение, а более длинная подпись переносила слова той же ширины, а не расширялась, а размер изображения оставался без изменений.
Попытка «встроенного блока» в CSS, похоже, не помогла.
Вот скрипка .
<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>