如何使我的图像响应？答案

【问题标题】：how to make my images responsive?如何使我的图像响应？
【发布时间】：2013-06-13 08:31:18
【问题描述】：

大家好，所有使用推特引导程序的人：http://twitter.github.io/bootstrap/base-css.html#tables

我正在徘徊如何阻止这种情况发生：http://img823.imageshack.us/img823/6606/screenshotfrom201306071.png 我希望图像随窗口一起调整大小，直到它从 bootsrap 的文本上方凸出。

链接：http://www.prxa.info/articles/category/1 用户：test.prxa。通过：测试

我需要图片最大为 350 像素，因为人们包含的一些图片很大，必须调整大小以免弄乱。

这是我为缩略图区域和里面的图像自定义的 CSS：

.thumbnail
{
    width: 350px;
    height: 220px;
    display: table-cell; 
    vertical-align: middle;
}

img.tagline-img
{
    max-width: 350px;
    max-height: 220px;
}

【问题讨论】：

我看到你在回复大家说max-width 不起作用（firefox 与它无关）。这是一个正确的答案，如果进行更改不能为您解决问题，则意味着您还有其他问题。使用 Inspect Element 并查看这些属性是否正在生效，或者它们是否被其他样式覆盖。这是一个超级简单的jsfiddle 来说明它。
似乎没有人注意到我拥有的包含图像的“缩略图”类...删除硬编码的宽度似乎已经修复了它。
你为什么要通过 CSS 来做这个？确定服务器上的宽度/高度，然后在宽度/高度标签中适当地重新调整它。当<img> 标签中已经存在这样的标签时，我不希望看到在图像上使用width 属性。

标签： javascript html css twitter-bootstrap

【解决方案1】：

不是最好的响应技术，但它会使其适合

随便用

img.tagline-img { 
   width:100%;
}

刚刚在您的网站上测试过

【讨论】：

我刚刚在 img.tagline-img 上添加了 100% 宽度的您网站的屏幕截图
我明白了：img543.imageshack.us/img543/3512/screenshotfrom201306072.png 但它可以在 chrome 中运行？！

【解决方案2】：

取自引导程序：

img{
    border:0;
    max-width:100%; /* Part 1:Set a maxium relative to the parent */
    width:auto\9; /* IE7-8 need help adjusting responsive images */
    height:auto; /* Part 2:Scale the height according to the width,
        otherwise you get stretching */
-ms-interpolation-mode:bicubic
}

【讨论】：