强制引导响应图像为方形 [英] Force bootstrap responsive image to be square

查看：23
本文介绍了强制引导响应图像为方形的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

图像是在循环中创建的:

<div class="col-sm-6"><div id="行"><?phpforeach ($products as $product){?><div class="col-sm-6"><a href="/admin/product/" class="thumbnail"><div class="caption">标题
10 次查看
<img src="/assets/img/product/<?php echo $product['img'] ?>"class="img img-responsive full-width"/></a>

<?php}?>

图片来自不同的尺寸有些比宽度高，而有些比高度宽.如何在响应时强制所有图像与高度相同.他们可以使用宽度:100％，但我不能使用高度:自动，比例将保持不变.我应该怎么做才能使我的图像在响应时方正，但我不知道 %.

例如，绿色的衬衫没有他的宽度那么高

我想在没有 jquery 的情况下做到这一点，所以只有 CSS！

解决方案

你可以这样做:

  1. 用 padding-bottom:100% 将图像包装在容器中；溢出:隐藏；位置:相对
  2. 将图像绝对放置在该容器内.

FIDDLE

说明:

padding top/bottom(如margin top/bottom)是根据父元素的宽度计算的.由于.image div与父元素宽度相同，设置padding-bottom:100%; 给它的高度和宽度一样，所以它是方形的(它的内容需要绝对定位或浮动，这样它就不会改变父级的大小).

HTML:

<div class="caption">标题<br/>3 x bekeken
<div class="图像"><img src="" class="img img-responsive full-width"/>

</a>

CSS:

.image{位置:相对；溢出:隐藏；填充底部:100%；}.image img{位置:绝对；}

Images are created in a loop with:

<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>

The images are from diffrent sizes some are higher then the width, and some are wider then the height. how can i force all images to have the same with as the height while being responsive. It is ok for them to have widh:100%, but i can not use height:auto, the ratio will stay then. What should i do to make my images squared while they are responsive and i dont know the %.

Example, the green shirt is not as high as his width

I want to do this without jquery so CSS only!

解决方案

You can do this :

  1. wrap the image in a container with padding-bottom:100%; overflow:hidden; position:relative
  2. position the image absolutely inside that container.

FIDDLE

Explanation :

Padding top/bottom (like margin top/bottom) is calculated according to the width of parent element.As the .image div has the same width as its parent, setting padding-bottom:100%; give it the same height as its width so it is square (its content needs to be absolutely positioned or floated so it doesn't change the parent's size).

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;
}

这篇关于强制引导响应图像为方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆