html - 媒体查询效果不理想

在使用Chrome开发人员工具尝试确定要在媒体查询中操作的元素之后，我对使横幅广告能够响应平板电脑和iPhone的尺寸没有任何运气。这是网址：

http://thursdaypools.mediafuel.net/innovations/fiberglass-pool-anchoring-system/

如果您调整其大小，您将看到横幅图像完全不会改变大小，我已经尝试了以下方法：

@media screen and (max-width: 991px) {         #video-header {           height: 240px;         } }

/*@media (max-width: 980px) {   .banner {     height: 30vh; } }*/

被注释掉的代码是由我之前的某个人编写的，当我得到它时它并没有起作用，而您在顶部看到的是我尝试使用已有的东西后所付出的努力。 ＃video-header和.banner似乎都没有任何作用。

该横幅的代码是以下代码：

<?php get_header(); ?>
    <div id="post-page" class="single-innovations-page content-area">   <?php get_template_part( 'template-parts/content', 'page-intro' ); ?>
<!--dancortes added this code below here-->
<?php get_template_part('template-parts/content','page-banner'); ?>
  <?php if( get_field( 'product_video' ) ): ?>
    <div id="video-header" class="full-video">
    <iframe id="player" type="text/html" width="100%" height="100%" src="<?php the_field( 'product_video' ); ?>?enablejsapi=1&amp;rel=0;" frameborder="0" allowfullscreen></iframe>
<div onClick="closeVideo()" class="close-video">
 <p>Close</p>
 </div>
</div>
<?php endif; ?><!--product_video-->
  <main class="subpage-content">
   <div class="medium-wrapper">
     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
       <div class="innovation-information">
         <?php the_field( 'innovation_information' ); ?>
       </div>
       <?php endwhile; else : ?>
         <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
       <?php endif; ?>
     </div>
</div><!--page-top-->

最佳答案

将background-size添加到.banner

.banner {
  background-size: contain;
}

关于html - 媒体查询效果不理想，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43289309/