媒体查询以对齐图像 - media query to align images

我昨天在另一篇文章中发布了下面的问题。似乎搞砸了。(发布日期，评论...等(我希望这篇文章会更好。我邀请另一篇文章的评论者查看它并评论 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>

关于这个问题的评论者，我想通了。至少对于我的情况。

首先，我编辑了模板产品图像.php。当然，我首先将此文件复制到我的子主题中：儿童主题/woocommerce/单一产品/产品图像.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;
    }

你是对的。您可以使用媒体查询实现所需的内容，只需将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%;也没关系