使用百分比和最大宽度将图像裁剪为正方形 [英] Crop an image to square using percentages and max widths

问题描述

使用回应式网站，因此无法使用设定的宽度。

我需要图片才能全部裁剪成正方形。我不能定义确切的测量，因为它也需要有 max-width：100％，以使它是一个响应的图像，调整它的大小相对于容器相对于浏览器的宽度）。

我看到很多解决方案建议使用 background-image 但这不可能，它必须是 img 标记。

我目前有：

  .views-field-field-photo img {
 width：100％; 
 height：auto; 
} 
 
 
 
< div class =field-content> 
< img src =imagehere> 
< / div> 
  使用 padding-bottom  / code>以及定位和 overflow：hidden ，您可以创建一个响应式方形容器：
  .field-content {
 width：80％; 
 padding-bottom：80％; 
 margin：1em auto; 
 overflow：hidden; 
 position：relative; 
 background：＃000 
} 
 
 .field-content img {
 position：absolute; 
 width：auto; 
 min-width：100％; 
 min-height：100％; 
} 
  
  DEMO  
 
 
 
 缩放时的jQuery DEMO中心图片 
 
 
 
我整理了一些js，允许多个图片缩放，并在一个简单的网格上放置4张图片
 
Working a responsive site, so I cannot use set widths.

I need pictures to all crop to square. I cannot define the exact measurements because it also needs to have max-width:100% in order to make it a responsive image which adjusts it's sized relative to the container (which is relative to the width of the browser).

I've seen a lot of solutions that suggest using background-image but this not possible, it must be an img tag. It also must work in IE8.

Any ideas?

I currently have:
.views-field-field-photo img {
    width: 100%;
    height: auto;
    }



    <div class="field-content">
<img src="imagehere" >
</div>

解决方案
using padding-bottom along with positioning and overflow:hidden you can create a responsive square container:
.field-content{
    width:80%;
    padding-bottom:80%;
    margin:1em auto;
    overflow:hidden;
    position:relative;
    background:#000
}

.field-content img {
   position:absolute;
   width:auto;
    min-width:100%;
    min-height:100%;
}
DEMO

jQuery DEMO center images when scaling

I tidied up some of the js allowing multiple images to be scaled and put 4 images on a simple grid

                        
这篇关于使用百分比和最大宽度将图像裁剪为正方形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！