html - 如何在响应时调整图像大小

Question

我从 css-tricks.com 得到了这段代码但它似乎无法正常工作。谁能告诉我如何使用它。

<picture alt="description">
  <source src="small.jpg">
  <source src="medium.jpg" media="(min-width: 400px)">
  <source src="large.jpg" media="(min-width: 800px)">
</picture>

我的代码

<div class="col-sm-6 col-md-4">
    <picture alt="description">  
      <source src="images/office-room.jpg">  
      <source src="medium.jpg" media="(min-width: 400px)">  
      <source src="large.jpg" media="(min-width: 800px)">
  </picture>
</div>

Answer 1

请引用这个:

<style>
.fixed-ratio-resize { /* basic responsive img */
    max-width: 100%;
    height: auto;
    width: auto\9; /* IE8 */
}
</style>

<img class="fixed-ratio-resize" src="students.jpg" alt=""/>

DEMO