Question

我昨天在另一篇文章中发布了这个问题。它似乎搞砸了。（发布日期，评论......等）我希望这篇文章会更好。我邀请另一篇文章的评论者来看一下并评论aqain。提前谢谢。

在我的woocommerce单品页面上显示了一个相当大的缩略图。对于一种产品，另一种产品的肖像图像。我想把肖像画放在周围的div中心。我已尝试将margin-left和margin-right设置为x％。这适用于肖像画，但是风景画被推到了右边。缩略图图像浮动到左侧。改变这种情况会使规模变得混乱。

简而言之，我希望肖像缩略图居中，横向缩略图标准（左对齐）。

我想知道这可以通过媒体查询实现，还是我监督一个更简单的解决方案。请指教。

修改

特此生成的html / css代码：

.woocommerce img,
.woocommerce-page img {
     height: auto;
     max-width: 100%;
}
.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
     float: left;
     max-width: 100%;
}

   <body class="single single-product postid-3758 logged-in admin-bar no-customize-support custom-background woocommerce woocommerce-page custom-background-white custom-font-enabled single-author">

<div id="primary" class="site-content">
  <div id="content" role="main">

    <div itemscope itemtype="http://schema.org/Product" id="product-3758" class="post-3758 product type-product status-publish has-post-thumbnail downloadable virtual taxable shipping-taxable purchasable product-type-simple product-cat-adri-2 product-cat-hellevoetsluis product-tag-adri product-tag-hellevoetsluis product-tag-zaandam instock">

      <div class="images">
        <a href="http://etc" itemprop="image" class="woocommerce-main-image zoom" title="SONY DSC" data-rel="prettyPhoto">
          <img width="567" height="853" src="http://placehold.it/567x853" class="attachment-shop_single wp-post-image" alt="SONY DSC" title="SONY DSC" />
        </a>
      </div>

      <div class="summary entry-summary">
        <h1 itemprop="name" class="product_title entry-title">Photo 3</h1>
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

          <p class="price"><span class="amount">&euro;xx,xx</span>  <small class="woocommerce-price-suffix">Exclusief BTW</small>
          </p>

          <meta itemprop="price" content="xx" />
          <meta itemprop="priceCurrency" content="EUR" />
          <link itemprop="availability" href="http://schema.org/InStock" />
        </div>
      </div>
    </div>
  </div>
</div>
</body>

Answer 1

尊重这个问题的评论者，我明白了。至少对我而言。

首先我编辑了模板product-image.php。当然我首先将这个文件复制到我的孩子主题：child-theme / woocommerce / single-product / product-image.php。

我将整个函数包装在<p>标记中，因此代码如下所示：

<div class="images">


<p id="thumbnail-align" class="align-thumbnail">

<?php
    if ( has_post_thumbnail() ) {

        $image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
        $image_link  = wp_get_attachment_url( get_post_thumbnail_id() );
        $image       = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
            'title' => $image_title
            ) );

        $attachment_count = count( $product->get_gallery_attachment_ids() );

        if ( $attachment_count > 0 ) {
            $gallery = '[product-gallery]';
        } else {
            $gallery = '';
        }

                echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_title, $image ), $post->ID );

    } else {

        echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );

    }
?>

</p>


        <?php do_action( 'woocommerce_product_thumbnails' ); ?>

</div>

接下来我对woocommerc.css进行了一些调整：

.woocommerce #content div.product div.images img,
.woocommerce div.product div.images img,
.woocommerce-page #content div.product div.images img,
.woocommerce-page div.product div.images img {
/*    display: block; -> can be deleted
      width: 100%; -> can be deleted
      height: auto; -> can be deleted*/
box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
-webkit-transition: all ease-in-out .2s;
-moz-transition: all ease-in-out .2s;
-o-transition: all ease-in-out .2s;
transition: all ease-in-out .2s;
}

在328行左右。

在woocommerce-layout.css中更改了以下内容（第39行）：

/*.woocommerce img, -> can be deleted
  .woocommerce-page img { -> can be deleted
     height: auto; -> can be deleted
     max-width: 100%; -> can be deleted
     } -> Can be deleted*/

/* and add the following:*/

p.align-thumbnail {
    text-align: center;
    }

Answer 2

你是对的。您可以使用媒体查询实现所需目标，只需将float:left更改为float:inherit或float:none

这是示例代码。

    //when screen is resize to 300px
    @media screen and (max-width: 300px) {
            .woocommerce #content div.product div.images,
            .woocommerce div.product div.images,
            .woocommerce-page #content div.product div.images,
            .woocommerce-page div.product div.images {
                 float: inherit;
                 //more styles here
             }
        }

如果您不包含max-width: 100%;

，则可以

媒体查询以对齐图像

2 个答案: