如何在指定尺寸内裁剪图像

Question

在我的woocommerce网站上，每个产品都有一个600px x 600px的缩略图，这个缩略图中的图像通常要大得多，因为它们是水彩画（例如2000 x 2000）。我想要做的是将图像放在600x600内，并用白色边框填充负空间。

示例（此600x600图像周围有很多白色背景） -

我尝试用CSS做这件事，但它总是让我网站的其他部分搞得一团糟。有没有可以实现这一目标的在线工具，还是我应该继续使用我的CSS？

CSS -

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {  

    height: 330px;
    width: 330px;
    position: relative;

}  
.woocommerce ul.products li.product a img {  
    max-height: 90%;  
    max-width: 90%;  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;  
    background: #3A6F9A;  
    border: 2px solid gray; 
    box-shadow: 10px 10px 5px #888888;
}

HTML -

<li class="post-267 product type-product status-publish has-post-thumbnail first instock shipping-taxable purchasable product-type-variable has-default-attributes has-children">
    <a href="http://localhost/testsite/?product=autumn-by-the-lake-copy" class="woocommerce-LoopProduct-link"><img width="3150" height="2253" src="http://localhost/testsite/wp-content/uploads/2017/03/Autumn-by-the-Lake-Carolyn-Judge-Watercolours.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="Autumn by the Lake Carolyn Judge Watercolours" title="Autumn by the Lake Carolyn Judge Watercolours" srcset="http://localhost/testsite/wp-content/uploads/2017/03/Autumn-by-the-Lake-Carolyn-Judge-Watercolours.jpg 3150w, http://localhost/testsite/wp-content/uploads/2017/03/Autumn-by-the-Lake-Carolyn-Judge-Watercolours-300x215.jpg 300w, http://localhost/testsite/wp-content/uploads/2017/03/Autumn-by-the-Lake-Carolyn-Judge-Watercolours-768x549.jpg 768w, http://localhost/testsite/wp-content/uploads/2017/03/Autumn-by-the-Lake-Carolyn-Judge-Watercolours-1024x732.jpg 1024w" sizes="(max-width: 3150px) 100vw, 3150px" />
    <h2 class="woocommerce-loop-product__title">Autumn By The Lake (Copy)</h2></a>
</li>

Answer 1

只需在img上设置object-fit: cover;（尚未支持IE）。

关于＆＃39;封面＆＃39;值：

  

整个图像按比例缩小或扩展，直到它完全填满盒子，保持纵横比。这通常导致只有部分图像可见。

或

img{
  ...
  background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat;
  background-size: contain;
  ...
}

或

img{
  width: auto;
  height: 600px;
}

Answer 2

您可以在Woocommerce中定义图像尺寸＆gt;＆gt;设置＆gt;＆gt;产品＆gt;＆gt;显示。在定义所需尺寸后，您可以重新生成图像。因此，加载更大的图像不会对系统造成不必要的负担。

Answer 3

<强> CSS

<div class="ratio-box">
    <div class="img-wrapper">
        <img class="landscape" src="https://traxanhthainguyen.com/images/201703/van-hoa-uong-tra-cua-nguoi-viet.jpg" alt="demo">
    </div>
</div>

<强>样本

webpack.dev.config

要自动确定图像是横向还是纵向，我们可以使用JavaScript。完整代码：http://vanquyet.com/css-crop-and-center-image-with-the-specific-aspect-ratio.html

希望它可以提供帮助。

Answer 4

您可以使用函数在wordpress中添加自定义图像大小 add_image_size( string $name, int $width, int $height, bool|array $crop = false ) Read full documentation here

Alernatively， 转到WP-admin，导航到WooCommerce-＆gt;单击设置，然后单击产品选项卡，然后单击显示。

您可以在那里添加图片大小。如果您想要裁剪图像，请不要忘记在图像尺寸前单击硬裁剪。

在您之后，需要使用重新生成图像缩略图插件重新生成图像大小。

获得所需的图像大小后，现在只需使用css / html处理所有内容。