PICTUREタグ内で画像を拡大/縮小する正しい方法は何ですか？

Question

イメージのスケーリングは簡単です。

残念ながら動作しません同様の方法で pictureタグの source内部をスケーリング

.container > img { 
    width: 100%; 
    height: auto; 
} 

。

.container > source { 
    width: 100%; 
    height: auto; 
} 

<picture>タグ内で画像を拡大縮小する正しい方法は何ですか？

以下の例では、これら2つの画像をブラウザの幅に合わせてどのようにスケールするのですか？

<div class="container"> 
    <picture> 
     <source srcset="first-image.webp" type="image/webp"> 
     <img src="second-image.jpg"> 
    </picture> 
</div> 

Answer 1

はどうやら、あなたの中にHTMLの例を単純化質問;画像には1つの画像しか含まれていませんが、あなたは「これらの2つの画像」と言います。だから私はこれがあなたのために働くことを望みます。

解決策は、ソースをターゲットにするのではなく、imgだけをターゲットにすることです。セレクタを正しく書く必要があります。

.container > picture > img { 
    width: 100%; 
    height: auto; 
} 

<div class="container"> 
    <picture> 
     <source srcset="first-image.webp" type="image/webp"> 
     <img src="second-image.jpg"> 
    </picture> 
</div> 

ところで、それはここではなく、<div class="container"><figure>を使用することがよりセマンティックです。

Answer 2

だけでなく、あなたが

メディア= "（最小幅：650px）" のようなユーザメディア要素できるソースの

ソース - https://www.w3schools.com/tags/tag_picture.asp