<picture>要素を使って画像を完全に隠す

Question

<picture>要素の画像を特定の幅で非表示にする方法を誰かが知っているかどうかは、別の画像で置き換えるのではなく、

私は自分のカスタムCSSで@mediaクエリを使用して画像を表示/非表示していましたが、特定の幅で画像を表示するように最近<picture>要素を認識しました。

これは、両方のバージョン（テキストの2段落の間など）で同じ場所に座っている画像に対して、モバイルとデスクトップの異なる画像を表示する方がずっと簡単です。

しかし、モバイルよりもデスクトップ上に少し上に座る画像があります。たとえば、テキストの右側の画像は、その段落の最初に配置されますが、モバイル段落の後に画像を表示したい。例えば

ここに私の記事の最初のイメージの私の30日間チャレンジ広告：http://www.smartfertilitychoices.com/pcos-diet-plan/

それは使用して一定の幅のために完全に/ショーの画像を非表示にすることは可能です（それでも、このポストのための@mediaクエリを使用して） <picture>要素？

これは意味があることを願っており、事前に感謝します！

Answer 1

単にブートストラップクラスを使用してください。 あなたが参考のために

<div class = "hidden-xs "></div> 
<div class = "hidden-sm "></div> 
<div class = "hidden-md "></div> 
<div class = "hidden-lg "></div> 

をしたい以下の選択幅の大きさに依存することができます

をしかし、あなたは非常に特定の幅でそれを設定したい結集場合は、単にメディアクエリを使用します。

ブートストラップについて詳しく知りたいですか？そして、これをチェック：満たされ、一定の基準に一度 `` 要素のNONE`： https://getbootstrap.com/docs/3.3/css/

Answer 2

<picture> 
<source media="(min-width: 1280px)" srcset="Enter your image(1) URL (or) Image(1) Path"> 
<source media="(min-width: 480px)" srcset="Enter your image(2) URL (or) Image(2) Path"> 
<img src="Enter your image(3) URL (or) Image(3) Path" alt="Image(3)" style="width:auto;"> 
</picture> 

異なるビューポートのサイズで画像の読み込みの異なるバージョンを確認するには、ブラウザのサイズを変更します。

画像要素は、IE12以前およびSafari 9.0以前ではサポートされていません。