MAGETWO-31195: Image compression and sizing

- Generic image containers size changes

Author: Bogdan Plieshka

app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/listings.less

@@ -60,7 +60,7 @@
         }
 
         &-info {
-            width: 150px;
+            width: 152px;
             max-width: 100%;
             .page-products & {
                 width: 240px;
@@ -316,8 +316,8 @@
     .page-layout-3columns .products-grid .product-item { width: 100%/4 }
     .page-products .products-grid .product-items { margin: 0; }
     .page-products .products-grid .product-item {
-        width: 23%;
-        margin-left: calc(~"(100% - 4 * 23%) / 3");
+        width: 23.233%;
+        margin-left: calc(~"(100% - 4 * 23.233%) / 3");
         padding: 0;
         &:nth-child(4n+1) {
             margin-left: 0;

app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/widgets.less

@@ -82,8 +82,8 @@
     .page-layout-3columns .block.widget .products-grid .product-item { width: 100%/4 }
     .block.widget .products-grid .product-items { margin: 0; }
     .block.widget .products-grid .product-item {
-        width: 24%;
-        margin-left: calc(~"(100% - 4 * 24%) / 3");
+        width: 24.439%;
+        margin-left: calc(~"(100% - 4 * 24.439%) / 3");
         padding: 0;
         &:nth-child(4n+1) {
             margin-left: 0;

app/design/frontend/Magento/blank/Magento_Wishlist/web/css/source/module.less

@@ -289,8 +289,8 @@
 .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen-l) {
     .wishlist-index-index .products-grid .product-items { margin: 0; }
     .wishlist-index-index .products-grid .product-item {
-        width: 24%;
-        margin-left: calc(~"(100% - 4 * 24%) / 3");
+        width: 24.439%;
+        margin-left: calc(~"(100% - 4 * 24.439%) / 3");
         padding: 0;
         &:nth-child(4n+1) {
             margin-left: 0;

app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/listings.less

@@ -58,7 +58,7 @@
         }
 
         &-info {
-            width: 150px;
+            width: 152px;
             max-width: 100%;
             .page-products & {
                 width: 240px;
@@ -317,8 +317,8 @@
     .page-layout-3columns .products-grid .product-item { width: 100%/4 }
     .page-products .products-grid .product-items { margin: 0; }
     .page-products .products-grid .product-item {
-        width: 24%;
-        margin-left: calc(~"(100% - 4 * 24%) / 3");
+        width: 24.439%;
+        margin-left: calc(~"(100% - 4 * 24.439%) / 3");
         padding: 0;
         &:nth-child(4n+1) {
             margin-left: 0;

app/design/frontend/Magento/luma/Magento_Wishlist/web/css/source/module.less

@@ -328,7 +328,7 @@
                 margin: 0;
             }
             .product-item {
-                width: 24%;
+                width: 24.439%;
                 margin-left: calc(~"(100% - 4 * 24%) / 3");
                 margin-bottom: @indent-base;
                 padding: 0;

app/design/frontend/Magento/luma/etc/view.xml

@@ -157,9 +157,9 @@
         <var name="customer_account_my_tags_tag_view:height">100</var>
 
         <var name="cart_cross_sell_products:type">thumbnail</var>
-        <var name="cart_cross_sell_products:width">235</var>
+        <var name="cart_cross_sell_products:width">200</var>
         <var name="cart_cross_sell_products:ratio">1</var>
-        <var name="cart_cross_sell_products:height">290</var>
+        <var name="cart_cross_sell_products:height">248</var>
 
         <var name="gift_messages_checkout_thumbnail:type">thumbnail</var>
         <var name="gift_messages_checkout_thumbnail:width">100</var>