首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >强制引导响应图像为正方形

强制引导响应图像为正方形
EN

Stack Overflow用户
提问于 2014-05-01 08:17:28
回答 5查看 65.3K关注 0票数 33

图像是在循环中使用以下命令创建的:

代码语言:javascript
复制
<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>

这些图像来自不同的大小,有些比宽度高,有些比宽。如何在响应时强制所有图像具有与高度相同的值。他们有宽:100%是可以的,但我不能使用高度:自动,那时比例将保持不变。我应该怎么做,使我的形象,而他们是响应性的,而我不知道的%。

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

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

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2014-05-07 20:56:17

您可以这样做:

padding-bottom:100%; overflow:hidden; position:relative

  • position
  1. 将图像包装在容器中,并将图像完全放在该容器内。

说明:

HTML:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
.image{
    position:relative;
    overflow:hidden;
    padding-bottom:100%;
}
.image img{
    position:absolute;
}
票数 76
EN

Stack Overflow用户

发布于 2016-03-10 22:34:34

以下是适用于每种大小的图像http://jsfiddle.net/oboshto/p9L2q/53/的最佳解决方案

HTML相同:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
.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%);
}
票数 31
EN

Stack Overflow用户

发布于 2014-05-01 08:27:10

您可以将每个图像包装在div中,然后将div的溢出设置为隐藏。只要div是方形的,那么你的图像就会被裁剪。div也可以响应。similar post

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23400232

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档