CSS：画像が小さくても画像の周りにコンテナ要素を囲み、テキストは囲みませんか？

Question

赤のコンテナ要素は、テキストではなく画像の幅にしたいが、幅が広いのでテキストのサイズに及ぶ。これを達成する方法は？

https://jsfiddle.net/strz3stt/

注：私は既存のマークアップで動作するようにしようとしているので、私はマークアップを編集することはできませんだけとCSSでこれを行うための方法が必要です。

HTML：

<span class="wrapper"> 
    <img src="https://placekitten.com/g/400/300"> 
    <a href="http://google.com">Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google </a> 
</span> 

CSS：

.wrapper { 
    border: 3px solid red; 
    display: inline-block; 
} 
.wrapper img { 
    border: 1px solid blue; 
} 
.wrapper a { 
    display: block; 
    border: 1px solid green; 
} 

Answer 1

それは画像の幅へのリンクのテキストを折り返すためにあなたの意思だと仮定すると、何を行うことができますすることにラッパーを回しています表。 width: 1pxを設定すると、幅をコンテンツの幅にすることができます。
（これもきちんとテキスト内の単語が画像よりも広いことを起こるケースを処理します。）

.wrapper { 
 
    border: 3px solid red; 
 
    display: table; width: 1px; 
 
} 
 
.wrapper img { 
 
    border: 1px solid blue; 
 
    max-width: calc(100vw - 22px); 
 
} 
 
.wrapper a { 
 
    display: block; 
 
    border: 1px solid green; 
 
}

<span class="wrapper"> 
 
    <img src="https://placekitten.com/g/400/300"> 
 
    <a href="http://google.com">Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google </a> 
 
</span>

また、あなたは<figure>ではなく<span>を使用することを検討すべきですラッパーのために。これはまさに<figure>の対象です。