Question

如何将矩形图像“调整”为正方形图像，而不会丢失任何图像？

这是一个eBay列表，它不允许脚本标签，所以我想避免使用JS和我们的CSS。

http://www.garralab.com/nailthumb-examples.php 参见 - 实施例＆gt;调整大小。

这只能在CSS中使用吗？

Answer 1

没有什么能阻止你使用旧式CSS：

<img
    src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" 
    style="width:400px; "/>

<hr />

<img 
    src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" 
    style="height:100px; width:100px; "/>

说明：

仅设置宽度或高度，并调整imags的大小并保持其比例。

设置宽度和高度，您的图片将调整大小，比例将会丢失。

演示

http://jsfiddle.net/FZ4nt/

Answer 2

使用背景可以解决此问题。如果您的图像尺寸未知，可以使用 background-size：cover 制作乡绅缩略图。

<div class="thumbnail" style="background-image:url(print/the/image/path.jpg);"></div>

.thumbnail {
  background-repeat:no-repeat;
  background-position: center;
  background-size: cover;
}

background-size：cover; - 会使任何图片覆盖整个区域。

Answer 3

这是object-fit在css中的作用。不幸的是，它只是一个few browsers supports。

另一种解决方案是，如果你使用一些服务器端脚本（f.ex.php），在服务器端获取图像的尺寸，并在调整图像大小后应用填充（或透明边框）来填充空间

F.ex：

原始图片为200x400，您想要制作100x100 外观，您可以使用：

<img src=".../200x400.png"
     width="50"
     height="100"
     style="padding: 0px 25px;" />

如何将矩形图像“调整”为正方形图像而不丢失任何图像？

3 个答案:

说明：

演示