如何使我的图像响应？

Question

Hi all using twitters bootstrap: http://twitter.github.io/bootstrap/base-css.html#tables

I am wandering how I can stop this happening: http://img823.imageshack.us/img823/6606/screenshotfrom201306071.png I want the images to resize with the window until it gets bumped up above the text from bootsrap.

Link for it: http://www.prxa.info/articles/category/1 User: test.prxa. pass: test

I NEED images to have a max of 350px here as some images people include are massive and have to be resized to not mess it all up.

Here is my custom css for the thumbnail area and the images inside:

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

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

Answer 1

Not the best responsive technique but it will make it fit

Just use

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

Just tested on your site

Answer 2

taken from 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
}