并排设置图像并在引导程序中响应

Question

I have written a code where 4 images are kept inside div side by side in cols.

Below is the code :

<div class="container-fluid">
        <div class="row">
            <div class="col-xs-3 col-sm-3 col-md-3">
                <img src="image2.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive" />
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3">
                <img src="image3.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3">
                <img src="image4.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/>
            </div>
            <div class="col-xs-3 col-sm-3 col-md-3">
                <img src="image5.jpg" alt="1" style="width:100%; height:70%;" class="img-responsive"/>
            </div>
        </div>
</div>

This looks like this in full size window :

enter image description here

Now when the window size is minimized, the images looks like this :

enter image description here

I want the image to look the way it looks in the full size even after minimizing without the image getting stretched.

I was able to get the view of above images without it getting stretched when i removed the style: width:100%; height:70%; but then in full sized window the images had blank spaces between each other.

Please help me to get this sorted.

Answer 1

Using

class="img-responsive"

will make your images responsive across devices. In specific, and as per Bootstrap's documentation , it will add

max-width: 100%;
height: auto;
display: block;

to your image elements.

You will need to lose your inline styles

style="width:100%; height:70%;"

as they override everything else (Protip: never use them).

Lastly, if you don't want the blank spaces between images you'll need to force remove the padding for each column. Example:

div.col-xs-3 {
    padding: 0;
}

Here is a sample codepen.

Answer 2

@FredRocha hey Fred, I tried using only img-reponsive & losing the inline styles but then the images were looking like this in full screen window size:

Example image

Answer 3

也许将img响应类添加到图像将解决此问题。