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

Question

在 wordpress 上，致力于客户端响应式移动主题。我所做的是将图像设置为带有背景的背景：带有简单 CSS 的 URL('') 问题是，我尝试了从封面到 100% 包含的所有可能选项，并将容器的大小设置为设置最大高度px和什么没有。图像要么被拉出容器，就好像它被放大到图像中的某个位置一样，或者像以小比例缩放到屏幕顶部显示的图像一样。

我想要得到的是，当用户访问网站时，它会计算屏幕尺寸，图像将适合屏幕尺寸的宽度和高度，然后在使用向下滚动时向下滚动，这样我们就不必拉伸它超过需要。

这是我到目前为止所得到的（我知道很多这是不必要的，我尽我所能。也似乎@media 并不总是生效。

.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;
  }
}

<?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(); ?>

标签： csswordpressmobileresponsive