Question

在wordpress上，致力于客户端响应式移动唯一主题。我所做的是将图像设置为背景背景：URL（＆＃39;＆＃39;）和简单的CSS 问题是，我试图从封面，100％包含和设置容器的大小每个可能的选项到设置max-height由px和什么不。图像可以从图像中的特定位置放大，也可以放大显示在屏幕顶部的图像，如同小尺度一样。

我想要得到的是，当用户访问网站时，它将计算屏幕尺寸，图像将适合屏幕尺寸宽度和高度，然后向下滚动，因为使用向下滚动所以我们不会有伸展它然后需要。

这是我到目前为止所得到的（我知道很多是不必要的，我在扔它所能做的一切。看起来@media似乎并不总是生效。

＆＃13;

.entry-content {
  background-image: url('http://drsofa6.local/wp-content/uploads/2018/05/dsofatruck.jpeg');
  background-attachment: scroll;
  background-position: center center;
  background-clip: content-box;
}

@media only screen and (min-device-width: 300px) {
  .entry-content {
    display: block;
    background-image: url('http://drsofa6.local/wp-content/uploads/2018/05/dsofatruck.jpeg');
    background-size: 5px;
    background-attachment: scroll;
    background-position: center center;
    background-clip: content-box;
  }
}

＆＃13;

<?php get_header(); ?>

<div id="content" class="clearfix">
  <div class="wrapper-outer">

    <!-- BEGIN FEATURED IMAGE -->
    <div class="featured-image">
      <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail(); ?>
      </a>
    </div>
    <!-- END FEATURED IMAGE -->

    <!-- BEGIN CUSTOM FIELD FOR EMBEDDABLE CONTENT -->
    <?php $featuredembed = get_post_meta($post->ID, 'FeaturedEmbed', true); ?>
    <div class="video-container">
      <?php echo $featuredembed; ?>
    </div>
    <!-- END CUSTOM FIELD FOR EMBEDDABLE CONTENT -->

    <!-- BEGIN SHORTCODE OUTSIDE THE LOOP -->
    <div class="post-shortcode">
      <?php $shortcode = get_post_meta($post->ID, 'Shortcode', true); ?>
      <?php echo do_shortcode($shortcode); ?>
    </div>
    <!-- END SHORTCODE OUTSIDE THE LOOP -->

    <div class="page-wrapper">

      <?php while ( have_posts() ) : the_post(); ?>

      <!-- BEGIN PAGE TITLE -->
      <h1 class="entry-title">
        <?php the_title(); ?>
      </h1>
      <!-- END PAGE TITLE -->

      <!-- BEGIN PAGE CONTENT -->
      <div class="entry-content">
        <?php the_content(); ?>
      </div>
      <!-- END PAGE CONTENT -->

      <!-- BEGIN POST NAVIGATION -->
      <div class="link-pages">
        <?php wp_link_pages(array('before' => '<p><strong>'.__('Pages:', 'bonfire').'</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
      </div>
      <!-- END POST NAVIGATION -->

      <!-- BEGIN EDIT POST LINK -->
      <?php edit_post_link(__('EDIT', 'bonfire')); ?>
      <!-- END EDIT POST LINK -->

      <?php endwhile; ?>

    </div>
    <!-- /.page-wrapper -->

  </div>
  <!-- /.wrapper-outer -->
</div>
<!-- /#content -->

<?php get_footer(); ?>

＆＃13;

自动调整为任何移动设备设置为背景的图像大小

0 个答案: