如何使用图像制作响应式网格

Question

I have 3 column and 2 row of images (all images have different size) on big screen. But it is wrong in small screen.

What is solution suggest bootstrap ?

html:

<div class="col-sm-4 col-xs-6 portfolio-item">
        <a data-bind="attr: { 'href': '@Url.Action("Index", "Artist")?id=' + id}" class="portfolio-link">
            <div class="caption">
                <span data-bind="text: name"></span>
                <br />
                <span data-bind="text: views"></span> Views
            </div>
            <img data-bind="attr { src: image }" class="img-responsive" alt="">
        </a>
    </div>

Answer 1

This is way more complicated than it seems. So basically you want to display 2 colums on extra small devices and 3 colums on small, medium and large devices and in the same time the images should align without any spaces.

As far as i know, if you want to use bootstrap only you can achieve it like this:

<div class="col-sm-4 hidden-xs portfolio-item">
    @foreach ( $artists as $key => $artist )
        @if ($key % 3 == 0)
            <a data-bind="attr: { 'href': '@Url.Action("Index", "Artist")?id=' + $artist->id}" class="portfolio-link">
                <div class="caption">
                    <span data-bind="text: name"></span>
                    <br />
                    <span data-bind="text: views"></span> Views
                </div>
                <img data-bind="attr { src: image }" class="img-responsive" alt="">
            </a>
        @endif

    @endforeach                
</div>

<div class="col-sm-4 hidden-xs portfolio-item">
    @foreach ( $artists as $key => $artist )
        @if ($key % 3 == 1)
            <a data-bind="attr: { 'href': '@Url.Action("Index", "Artist")?id=' + $artist->id}" class="portfolio-link">
                <div class="caption">
                    <span data-bind="text: name"></span>
                    <br />
                    <span data-bind="text: views"></span> Views
                </div>
                <img data-bind="attr { src: image }" class="img-responsive" alt="">
            </a>
        @endif

    @endforeach    
</div>

<div class="col-sm-4 hidden-xs portfolio-item">
    @foreach ( $artists as $key => $artist )
        @if ($key % 3 == 2)
            <a data-bind="attr: { 'href': '@Url.Action("Index", "Artist")?id=' + $artist->id}" class="portfolio-link">
                <div class="caption">
                    <span data-bind="text: name"></span>
                    <br />
                    <span data-bind="text: views"></span> Views
                </div>
                <img data-bind="attr { src: image }" class="img-responsive" alt="">
            </a>
        @endif

    @endforeach   
</div>

And add this to work for extra small devices:

<div class="col-xs-6 visible-xs portfolio-item">
    @foreach ( $artists as $key => $artist )
        @if ($key % 2 == 0)
            <a data-bind="attr: { 'href': '@Url.Action("Index", "Artist")?id=' + $artist->id}" class="portfolio-link">
                <div class="caption">
                    <span data-bind="text: name"></span>
                    <br />
                    <span data-bind="text: views"></span> Views
                </div>
                <img data-bind="attr { src: image }" class="img-responsive" alt="">
            </a>
        @endif

    @endforeach                
</div>

<div class="col-xs-6 visible-xs portfolio-item">
    @foreach ( $artists as $key => $artist )
        @if ($key % 2 == 1)
            <a data-bind="attr: { 'href': '@Url.Action("Index", "Artist")?id=' + $artist->id}" class="portfolio-link">
                <div class="caption">
                    <span data-bind="text: name"></span>
                    <br />
                    <span data-bind="text: views"></span> Views
                </div>
                <img data-bind="attr { src: image }" class="img-responsive" alt="">
            </a>
        @endif

    @endforeach   
</div>