画像とその周りにテキストを表示したい。問題は、事前に画像サイズがわからないことです。画像を拡大したくありません。画像は縮小してもOKです。画像が100％以下の最大スペースを占めるようにしたい。したがって、次の状況は問題ありません
1.
--------------------------
[ IMAGE 100% ]
Text Text Text Text TExt T
ext Text Text Text Text Te
2.
--------------------------
Text Text [ IMAGE 50% ]
Text Text Text Text TExt T
ext Text Text Text Text Te
3.
--------------------------
Text Text Text T [ IMAGE ]
ext Text Text Text TExt Te
xt Text Text Text Text Tex
1. 画像は全幅に縮小されます。2.で半角に。3では自然な画像サイズです。
解決策がないので、ケース 1. を放置し、画像を設定することにしました。max-width: 50%;
.myimage{
max-width: 50%;
max-height: 200px;
float: right;
height: auto;
margin-left: 10px;
}
設定max-width: 100%;すると、画像のネイティブ サイズが幅の約 80% になることがあり、テキスト用の水平スペースが少なすぎて見苦しくなります。
CSSだけでは無理ならJavaScriptでどうやってやりますか？
私が今していることは、画像の最大幅を 50% に設定することです。