image - (アンプ) 画像フロートの右が 100% を超えない場合がある

Question

これは AMP ページに関するものです。問題は、画像が元の形式を超えてサイズ変更され、修正方法がわからないことです。

私は達成したい：

• 右側に浮かぶ画像 (およびテキストがその周りを流れる)
• ビューポートの最大 40% を占めます
• ビューポートの 40% が元の画像サイズよりも小さい場合、画像は元のサイズよりも縮小する必要があります。
• 画像は元のサイズより大きくならない場合があります
• css 部分はすべてのサイズの画像で動作するはずです (したがって、css 部分に画像サイズの指定はありません)。
• 特定のビューポートの 40% が画像の元のサイズよりも大きい場合、画像を含む div は画像の元のサイズを超えて大きくならない可能性があります

もちろん、AMP のため、html コードで画像のサイズを指定しても問題ありません。

コード：

<style amp-custom>
    .right40 {float:right;max-width:40%}
    amp-img {max-width:100%} 
</style amp-custom>

<div class="right40">
    <amp-img src="picture.png" height="100" width="200" layout="responsive"></amp-img>
</div>

最小幅が指定されていない場合、画像が表示されないことに気付きました。最小幅を 100px にしましたが、画像は 100px に固定されます。

<style amp-custom>
    .right {min-width:100px;float:right;max-width:40%}
    amp-img {max-width:100%} 
</style amp-custom>