Question

我花了最后48小时试图做到这一点，它驱使我疯狂，我在这里来到你们之前浪费了任何时间。

我已经在这里查看了一些帖子，其中裁剪景观图像到正方形，但似乎没有一个可用于我正在设置的Joomla网站是如何设置的。任何帮助将不胜感激。

在此页面上：http://www.kanzenint.com/sfront/index.php/product-page页面底部有一个模块底部有4张图片。

第一张图片是每个产品列表中使用的图片，在主视图中，尺寸将是横向尺寸，但在类别和子模块视图中，我希望将图片裁剪为正方形，并且还需要有反应，所以当你调整大小时，它会自动调整。

我能够以像素为单位但不能用％。

类别和子模块的每个拇指的原始大小在其全尺寸上为375 x 250px，但我希望它为250 x 250px并居中。并且当它响应相同的1：1平方比率时。

非常感谢您的帮助！

Answer 1

JSFIDDlE

css transform可以为您提供帮助：

CSS将会：

.image-holder {
    position: relative;
    width: 250px;
    border: 1px solid;
    overflow: hidden;
    height: 250px;
}
.image-holder img {
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto
}

HTML将会：

<div class="image-holder">
    <img src="1920.jpg" />
</div>

Answer 2

要保持容器的1：1宽高比，您可以使用填充（此技术描述为here）。

要使图像居中于conatainer，您可以使用绝对定位技术，其中左/右负值与width:auto; margin:auto;

结合使用

要隐藏溢出，请使用overflow:hidden;

<强> DEMO

HTML：

<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" alt=""/>
</div>

CSS：

div{
    position:relative;
    width:22%;
    padding-bottom:22%;
    margin:1%;
    float:left;
    overflow:hidden;
}
img{
    position:absolute;
    height:100%; width:auto;
    top:0;left:-50%;right:-50%;
    margin:auto;
}

Answer 3

为什么不使用css background-image来做呢？像here这样的东西，但尺寸较小

.box { 
  /* background: url(images/bg.jpg) no-repeat center center fixed; move this to inline for dynamic images */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 250px;
  height: 250px;
}

如果您在服务器上有图像，并且图像的网址存储在$imageUrl内，则为：

<div style='background-image: url(<?php echo $imageUrl; ?>);' class='.box'></div>

CSS裁剪景观到广场

3 个答案: