html5图片自适应页面宽高比的特效

页面的head部分，需引入页面元素的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，主要时picture元素，根据不同的窗口大小来处理图片的宽高比，代码如下：

<p>请调整页面窗口大小查看效果</p>
<picture>
  <source media="(max-width: 400px)" srcset="https://cdn.somedomain.tech/samples/girl-on-bridge.jpg?quality=80&width=400&height=600&resizeStyle=entropy">
  <source media="(max-width: 800px)" srcset="https://cdn.somedomain.tech/samples/girl-on-bridge.jpg?quality=80&width=800&height=800&resizeStyle=entropy">
  <img src="https://cdn.somedomain.tech/samples/girl-on-bridge.jpg?quality=80">
</picture>