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

Answer 2

您也可以使用srcset属性离开，而无需使用github picturefill

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

Answer 3

看起来像你使用col-sm-4类

的bootstrap

如果是这样，那么你应该只将这个类添加到图像中 IMG响应

http://getbootstrap.com/css/#images

所以

<div class="col-sm-6 col-md-4">
    <img class="img-responsive" src="images/office-room.jpg">  
</div>

如何在响应时重新调整图像大小

3 个答案: