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

我从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>

来源

2015-08-13 Fazlan Mohammed

它看起来像你需要的不仅仅是为了正常工作的HTML。 css-tricks.com上的文章也指向这个：https：//github.com/scottjehl/picturefill。 – nancyolson531

您还可以使用srcset财产脱身，而无需使用github上picturefill

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

来源

2015-08-13 05:40:52

看起来像你使用的引导与COL-SM-4级

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

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

所以

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

来源

2015-08-13 07:08:39 Mathias

plz参考这一个：

<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

来源

2015-08-13 07:20:57

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

回答

相关问题