bootstrap 不同形状的图像

Question

我制作了这个模型：

我想知道这种类型的画廊是否可以用 bootstrap 构建，我还没有开始编写代码，因为我认为它不会因为行数而工作。
我想听听与 bootstrap 合作时间比我长的人的意见。

Answer 1

如果您问是否有默认值 bootstrap，答案是否定的。但是是的，这可以用你自己的 css.

我不明白你为什么不能用类似下面的东西来扭曲图像：

img.tilted{
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg); 
}

如果你想要这个"mask like behaviour"我不明白为什么你不能把所有的图像都放在下面的图层上，然后把透明图像放在上面

或者你可以尝试css像这样剪辑它http://www.html5rocks.com/en/tutorials/masking/adobe/

Answer 2

我发现了一些实际有效的东西！！ 并且响应迅速！ :D

.poligono, .poligono div {
    margin: 0 auto;
    transform-origin: 50% 50%;
    overflow: hidden;
    width: 250px;
    height: 250px;
}
.poligono {
    transform: rotate(45deg) translateY(10px);
}
.poligono .los1 {
    width: 355px;
    height: 355px;
    transform: rotate(-45deg) translateY(-74px);
}
.poligono .los1 img {
    width: 100%;
    height: auto;
    -moz-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
}

.poligono:hover img {
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
}



<div id="projects" class="projects">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-9 col-md-3">
                <h2>Projects</h2>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
               <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                        <p class="descricao">Cenas maradas acontecem</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-offset-2 col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
         </div>

         <div class="row">
            <div class="col-md-4">
               <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-offset-2 col-md-4">
                <div class="poligono img-responsive">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono img-responsive">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row margin-bottom">
            <div class="col-md-4">
               <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="poligono">
                    <div class="los1">
                        <a href="#"><img class=" img-responsive" src="img/project_1.jpg" alt="Projecto 1 UNlogical"/> </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

bootstrap 不同形状的图像

bootstrap different shaped images

image

css

twitter-bootstrap

image-gallery

css-shapes