指定された寸法内で画像を切り抜く方法

Question

私のウーコムウェブサイトでは、各製品に600px x 600pxのサムネイルがあります。このサムネイル内の画像は通常、水彩画（例：2000 x 2000）よりもはるかに大きくなります。私がしようとしているのは、画像を600x600以内に収め、白い枠線で負のスペースを埋めることです。

例（この600×600の画像の周りに白い背景の多くがあります） -

私はCSSでこれを行うことを試みたが、それは常に私のウェブサイトの残りの部分をアップmucks。これを達成するためのオンラインツールはありますか、または私は自分の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（まだありませんIEのサポート）にobject-fit: cover;を設定します。

「カバー」値について：

全体画像は、それが完全にボックスを満たすまで、アスペクト比が維持される縮小または拡張されています。これにより、通常、画像の一部のみが可視になります。

または

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

または

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

Answer 2

あなたはWoocommerce >>設定>>製品情報>>表示中の画像の大きさを定義することができます。ここでは、必要な寸法を定義した後、画像を再生成することができます。したがって、より大きな画像をロードすることで、システムに不必要な負荷がかかることはありません。

Answer 3

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

画像が風景や肖像画で、我々はJavaScriptを使用することができ、自動的に判別するには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> 

。フルコード：http://vanquyet.com/css-crop-and-center-image-with-the-specific-aspect-ratio.html

希望すると助かります。

Answer 4

あなたはAlernatively、 は、WP-adminに行くWooCommerce-> [設定]と[製品]タブに移動して、表示をクリック機能 add_image_size(string $name, int $width, int $height, bool|array $crop = false) Read full documentation here

を使用してワードプレスでカスタム画像サイズを追加することができます。

イメージサイズを追加できます。イメージを切り取る場合は、イメージサイズの前でハードクロップをクリックすることを忘れないでください。

イメージサムネイルプラグインの再生成を使用して、イメージサイズを再生成する必要があります。

希望の画像サイズを取得した後は、すべてのことをcss/htmlのみで処理できるようになりました。