我网站中唯一响应的部分？ [复制]答案

【问题标题】：The only part of my website that's responsive? [duplicate]我网站中唯一响应的部分？ [复制]
【发布时间】：2018-06-13 11:08:21
【问题描述】：

我用 bootstrap 构建了一个 WordPress 主题，整个页面都是响应式的，除了我无法响应的部分是下面的部分：

.showcase {
  height: 600px;
  padding: 100px 20px;
  text-align: center;
  border-bottom: #ccc 1px solid;
  margin-bottom: 30px;
  color: #fff;
}

.showcase h1 {
  font-size: 35px;
  padding-bottom: 20px;
  color: #fff;
}

.showcase p {
  font-size: 20px;
  margin-bottom: 50px;
}

<section class="showcase">
  <div class="container">
    <h1>
      <?php echo get_theme_mod('showcase_heading', 'Jon Doe'); ?>
    </h1>
    <p>
      <?php echo get_theme_mod('showcase_text', 'Making The Tractors Work For You!'); ?>
    </p>
    <a href="<?php echo get_theme_mod('btn_url', '#'); ?>" class="btn btn-primary btn-lg">
      <?php echo get_theme_mod('btn_text', 'Read More'); ?>
    </a>
  </div>
</section>

Screenshot

任何帮助或提示将不胜感激，谢谢。

【问题讨论】：

很难说“这部分”是什么。您能否更具体一些，或者添加指向您网站的链接而不是屏幕截图？
嗨 @jmargolisvt 是的，它的：web2dezine.com 和主标题图像是问题所在？
您采取了哪些措施来尝试使该部分具有响应性？您显示的代码均未显示任何响应行为。
感谢您的反馈，但我认为的问题是，图像是动态引入的，因此很难定位以做出响应。

标签： wordpress twitter-bootstrap css responsive-design responsive

【解决方案1】：

为 .showcase div 中的图像添加 background-size:cover 以填充其容器。使用媒体查询根据屏幕宽度修改图像的位置，或换入在该屏幕宽度下看起来更好的新图像。以下是一些帮助您入门的代码：

.showcase {
  background: url(http://www.web2dezine.com/wp-content/uploads/2017/12/showcase.jpg) no-repeat center center;
  background-size: cover;
}
@media screen and (max-width:480px) {
  // modified image styles for mobile here
}

【讨论】：

感谢 Kenny，这样的作品，但无法正确适应手机屏幕？
您最好的选择是创建一个单独的移动版本的图像，并在移动宽度媒体查询中使用它。
我会试试看，肯尼，干杯。

【解决方案2】：

只需将background-size: contain; 添加到.showcase 规则。这将使完整的图像适合所有尺寸的元素。

【讨论】：

嗨，是的，我已经将它添加到我的样式表中，但没有任何效果，我已将其添加到页面头部，上面的代码和某种作品，但没有填满整个屏幕，在顶部和底部留下空白。
那么你需要使用background-size: cover，但是在大多数情况下这会切断图像的某些部分。如果您希望图像保持正确的宽度/高度比例，除了这两个之外别无选择 - 哪个更适合您。