медиа-запрос для выравнивания изображений

Я вчера разместил вопрос ниже в другом посте. Кажется, что это испортилось. (Дата публикации, комментарии ... и т. Д.) Я надеюсь, что с этой записью все будет лучше. Я приглашаю комментаторов на другой пост, чтобы посмотреть на него и прокомментировать aqain. Заранее спасибо.медиа-запрос для выравнивания изображений

На моей странице с одним и тем же товаром отображается довольно большой эскиз. Для одного продукта портретный портрет для другого пейзажа. Я хочу сосредоточить портрет в окружающем div. Я пробовал его с margin-left и margin-right установлен на x%. Это прекрасно подходит для портретных, но пейзажные сдвигаются далеко вправо. Миниатюрные изображения плавают влево. Изменение этого испортит размер.

Короче говоря, я хочу, чтобы миниатюры с портретами были центрированы, а пейзаж - миниатюрами (выравнивался влево).

Мне было интересно, может ли это быть достигнуто с помощью медиа-запроса или я контролирую более простое решение. Пожалуйста посоветуй.

EDIT

Таким образом сгенерированный 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>

источник

2014-12-10 A3O

Вы не ищете запрос медиа ... но CSS вы вывесили, кажется, не быть связано с сгенерированный HTML вообще ... – rnevius

@mevius: спасибо за комментарий. Когда я изменяю правила css выше в инструментах разработчика Chrome, я вижу некоторые изменения, применяемые к изображениям. Просто не правильные. Когда вы ссылаетесь на классы .woocommerce, они находятся на теге тела страницы. Я добавил тег тела. Класс .images находится в фрагменте, так что div #content. Также можно увидеть тег html img. Или я тебя не понял? Если так, извините. Все еще изо всех сил пытаюсь понять все это. – A3O

Обновление: Когда я запускаю фрагмент выше, я могу изменить стили в инструментах разработчика. Заполнитель для изображения центрируется, когда я выключаю float-left и применяю текстовое выравнивание к центру. Однако на моей собственной странице это не работает. Изображение раздувается до 853 пикселей в ширину. – A3O

-1

Вы правы. Вы можете добиться того, что хотите использовать медиа-запрос, просто измените 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%;

источник

2014-12-10 07:37:57 Vincent815

Это не сработает, потому что я не изменяю размер окна. Я просто хочу изменить выравнивание миниатюры портрета, чтобы быть центрированным, и пейзажные, которые нужно оставить. – A3O

С уважением к комментаторам по этому вопросу, я понял это. По крайней мере, для моей ситуации.

Сначала я редактировал шаблон 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; 
    }

источник

2014-12-10 15:06:00 A3O

медиа-запрос для выравнивания изображений

ответ

Смежные вопросы