<picture>要素の 子要素<source> で1つずつ画像を指定

<picture>要素の 子要素<source> に、トリミングの違う画像を指定しています。
大きな画面では「横長の画像」、スマホなどの小さな画面では「縦長にトリミングした画像」を表示します。

HTMLはこちら。

<picture>
  <source media="(max-width:767px)" srcset="img/pic_ver400.jpg">
  <img src="img/pic_hor760.jpg" alt="紙のひげを持った笑顔の女性"> 
</picture>

<source>要素のメディア条件が一致しなければ、ブラウザはその <source>をスキップします。
上のコードだと、幅が767px以下の画面なら pic_ver400.jpg（縦長の画像）を表示し、そうでなければ pic_hor760.jpg（横長の大きめの画像）を表示します。

<picture>要素の <source>要素では、「src属性」でなく「srcset属性」を使うこと。
たとえ指定する画像が1つでも「src属性」では 画像ファイルは切り替えられません。

CSSはこちら（要点のみ）

img {
	display:block;
    margin:auto;
	max-width:100%}

画像を表示領域のなかでセンター合わせにした指定です。
ここでは、<img>要素のほうを display:block（2行目）で、ブロックレベルにしておき、margin:auto（3行目）でセンター合わせにしています。
ついでに max-width:100%（4行目）を指定しておくと、画面サイズが小さくなっても親要素内の表示領域にピッタリ合わせられます（はみ出さない）

<picture>要素のほうで指定する場合は、<img>要素には何も指定せず（インラインの置換要素のまま）、<picture>要素に display:block と text-align: center を指定すれば、画像がセンター合わせになります。

<picture>要素の 子要素<source> で記述子「x」による指定

<picture>要素の 子要素<source>内で、記述子「x」を使って ディスプレイの解像度に合わせてブラウザが画像ファイルをチョイスするようにしています。

HTMLはこちら。

<picture>
  <source media="(max-width:767px)"
          srcset="img/pic_ver400.jpg,
                  img/pic_ver800.jpg 2x,
                  img/pic_ver1200.jpg 3x">
  <source media="(min-width:768px)"
          srcset="img/pic_hor760.jpg,
                  img/pic_hor1520.jpg 2x">
  <img src="img/pic_hor760.jpg" alt="紙のひげを持った笑顔の女性"> 
</picture>