CSS 将横向裁剪为正方形

Posted 2023-02-25

【中文标题】CSS 将横向裁剪为正方形

【英文标题】：CSS Cropping Landscape to Square

【发布时间】：2014-08-12 09:48:10

【问题描述】：

在过去的 48 小时里，我一直在尝试这样做，这让我发疯了，以至于我在浪费任何人时间之前就来到这里找你们。

我在这里查看了许多将横向图像裁剪为正方形的帖子，但似乎没有一个适用于我正在处理的 Joomla 网站的设置方式。任何帮助将不胜感激。

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

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

我可以以像素为单位，但不能以 % 为单位。

类别和子模块的每个拇指的原始大小是 375 x 250 像素，但我希望它是 250 x 250 像素并居中。当它响应相同的 1:1 平方比时。

非常感谢您的帮助！

【问题讨论】：

能把相关代码做一个JSFiddle吗？

我正在努力尝试复制它，但最好的办法是查看链接，因为我将创建的内容很可能与我认为的不完全相同，因为我可能会错过一些东西:(

@kmoe 这个小提琴基于 A 标签是父级，IMG 是子级：jsfiddle.net/ninjab/0nhLoxd3/2

【参考方案1】：

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

要使容器中的图像居中，您可以使用绝对定位技术与负左/右值结合width:auto; margin:auto;

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

DEMO

html：

<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" />
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" />
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" />
</div>
<div>
    <img src="http://lorempixel.com/output/people-q-g-375-250-6.jpg" />
</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;

【讨论】：

谢谢，我今晚也去看看。我遇到的问题是我看到了一些例子（在其他人的帖子上，不是我的），但这些例子似乎对我不起作用。所以希望它会起作用。

您好，我确实尝试了您的解决方案，但似乎不起作用。也许我可能需要更改 PHP 模板文件？我基本上禁用了它上面的其余 CSS，我尝试在我的 Div 和它下面的 A 标签（当然单独尝试）中使用你的父编码，它们都在图像上方。 :(

@Ninjab 我去你的网站看了一下，hikashop 倾向于添加一大堆 CSS 规则，你需要禁用这些规则才能使上述技术正常工作。我通常禁用所有 hikashop CSS（也包括内联样式）并自己编写，但这涉及更多工作。您可以使用代码检查器来识别要禁用的 CSS 规则并添加您自己的规则（您需要编辑 hikashop 模板文件以删除未使用的内联 CSS 规则）。

感谢您的快速回复。我的模板正在为子模块使用listing_image_title.php 文件，所以我假设您的意思是编辑此文件并删除div 标签中添加的内联元素样式？我不介意做更多的工作，我只是疯狂地试图弄清楚为什么它会做我浪费了两天的时间来尝试让它在这么小的事情上发挥作用，哈哈。当我尝试你的方法时，我确实尝试禁用它上面的所有 CSS，但似乎没有用，但我会进入上面提到的 PHP 文件并删除一些东西，然后再试一次。

您在提供的 DEMO 中拥有它的方式非常适合我想做的事情。

【参考方案2】：

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>

【讨论】：

谢谢，今晚我会去看看，看看情况如何。

我只是试了一下，但似乎没有用 :(。如果我做得正确，您可以刷新我提供的页面链接以查看它与您的代码的外观。

【参考方案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;

如果您在服务器上有图片，并且图片的 url 存储在 $imageUrl 中，那么：

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

【讨论】：

Justinas，感谢您的回复，但我的内容是由 PHP 生成的，其中包含用于商店的 Joomla 中的内容组件，它会生成 JPEG，因此无法使用背景图像。我确实看到了这个解决方案，但因此它与我无关。感谢您的回复:)

好的，谢谢，我会看看我是否可以在模板中处理我的 PHP，但不确定我是否可以，因为特定图像的 PHP 非常复杂，我对 PHP 几乎一无所知非常新手的东西。