Настроить загрузочный образ принудительной загрузки как квадратный

Изображения создаются в цикле с помощью:

<div id="row">
    <div class="col-sm-6">
        <div id="row">
        <?php
        foreach ($products as $product)
        {
        ?>
            <div class="col-sm-6">
                <a href="/admin/product/"   class="thumbnail">
                <div class="caption">
                    title<br>
                    10  x viewed
                </div>
                <img src="/assets/img/product/<?php echo $product['img'] ?>" class="img img-responsive full-width" />
                </a>
            </div>
        <?php
        }
        ?>
        </div>
    </div>
</div>

Изображения от разных размеров , некоторые из них выше ширины, а - более широкие, чем высота. как я могу заставить все изображения иметь то же самое, что и высота, будучи отзывчивыми. Это нормально для них иметь widh: 100%, но я не могу использовать height: auto, тогда соотношение останется. Что я должен сделать, чтобы мои изображения были квадратными, когда они реагируют, и я не знаю%.

Например, зеленая рубашка не так высока, как его ширина

Я хочу сделать это без jquery, поэтому только CSS!

Ответы

Ответ 1

Вы можете сделать это:

оберните изображение в контейнер с помощью padding-bottom:100%; overflow:hidden; position:relative
расположите изображение абсолютно внутри этого контейнера.

FIDDLE

Объяснение:

Верхняя часть/нижняя часть (как край верхнего/нижнего) вычисляется в соответствии с шириной родительского элемента. Поскольку div .image имеет ту же ширину, что и его родительский элемент, установка padding-bottom:100%; дает ему ту же высоту, что и ее ширина поэтому он является квадратным (его содержимое должно быть абсолютно позиционировано или плавать, чтобы он не менял размер родителя).

HTML:

<div class="col-sm-6"> 
    <a href="#" class="thumbnail">
        <div class="caption">
            title<br/>3 x bekeken
        </div>
        <div class="image">
            <img src="" class="img img-responsive full-width" />
        </div>
    </a>
</div>

CSS

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
    position:absolute;
}

Ответ 2

Вот лучшее решение для каждого размера изображений http://jsfiddle.net/oboshto/p9L2q/53/

HTML то же самое:

<div class="col-sm-6"> 
    <a href="#" class="thumbnail">
        <div class="caption">
            title<br/>3 x bekeken
        </div>
        <div class="image">
            <img src="" class="img img-responsive full-width" />
        </div>
    </a>
</div>

Новый CSS:

.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
      position: absolute;
      max-width: 100%;
      max-height: 100%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
}

Ответ 3

Вы можете обернуть каждое изображение в div и затем установить переполнение div в скрытое. Пока div будет квадратным, тогда изображение будет обрезано. Div также может реагировать. аналогичный пост