如何在指定尺寸內裁剪圖像

在我的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>

來源

2017-05-24 eZ_Harry

的IMG剛剛成立object-fit: cover;（不支持IE還）。關於「蓋」值

：

整個圖像被按比例縮小或擴展，直到它完全填充框，縱橫比被維持。這通常只會導致部分圖像可見。

或

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

或

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

來源

2017-05-24 03:38:59 AvrilAlejandro

可以在Woocommerce定義圖像尺寸>>設置>>產品展示顯示。在定義您需要的尺寸後，您可以重新生成圖像。因此，加載更大圖像時不會對系統造成不必要的負載。

來源

2017-05-24 05:01:38

CSS

.ratio-box { 
    position: relative; 
    width: 100%; 
    height: 0; 
    padding-bottom: calc(100% * 600/600); // If you want other ratio, for example 3x4, this line will be: `padding-bottom: calc(100% * 4/3)` 
} 
.img-wrapper { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
} 
.img-wrapper img { 
    display: block; 
    position: absolute; 
    /* Center alignment */ 
    margin: auto; 
    top: -9999px; 
    bottom: -9999px; 
    left: -9999px; 
    right: -9999px; 
} 
.img-wrapper img.landscape { /* For images have natural width >= height */ 
    width: auto; 
    height: 100%; 
} 
.img-wrapper img.portrait { /* For images have natural width < height */ 
    width: 100%; 
    height: auto; 
}

DEMO

<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>

要確定自動圖像是橫向還是縱向，我們可以使用JavaScript。完整代碼：http://vanquyet.com/css-crop-and-center-image-with-the-specific-aspect-ratio.html

希望它能提供幫助。

來源

2017-05-24 05:07:34

您可以在WordPress的使用功能添加自定義圖像尺寸 add_image_size(string $name, int $width, int $height, bool|array $crop = false) Read full documentation here

Alernatively，去WP管理員，導航到WooCommerce->設置，然後點擊產品選項卡，然後單擊顯示。

您可以在那裏添加圖像大小。如果想要裁剪圖像，請不要忘記在圖像大小前單擊硬裁剪。

之後，將需要重新生成圖像大小，使用重新生成圖像縮略圖插件。

獲得所需的圖像大小後，現在只能使用css/html處理所有東西。

來源

2017-05-24 05:18:24

如何在指定尺寸內裁剪圖像

回答

相關問題