如何使我的图像响应?

时间:2013-06-07 19:41:50

标签: javascript html css twitter-bootstrap

大家都使用twitters bootstrap: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;
}

2 个答案:

答案 0 :(得分:0)

Your site in firefox with width:100%不是最好的响应技术,但它会使其适合

只需使用

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

刚刚在您的网站上测试

答案 1 :(得分:0)

取自bootstrap:

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
}