CSS:保持图像宽高比随视口宽度减小

Question

在这个页面上,有3个"门口"图形:

<div class="textwidget">    
    <div class="one-third first">
        <div id="doorway1" class="doorway">
            <h3>The Best Core Exercise Ever</h3>
            <div class="doorway-action">
                <a href="http://vmpersonal.com/product/core-strength-level-1/"><img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /> Watch Video Now</a>
            </div>
        </div>
    </div>
    <div class="one-third">
        <div id="doorway2" class="doorway">
            <h3>Core Strength Level 1 Program</h3>
            <div class="doorway-action">
                <a href="http://vmpersonal.com/product/core-strength-level-1/"><img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /> Watch Video Now</a>
            </div>
        </div>        
    </div>
    <div class="one-third">
        <div id="doorway3" class="doorway">
            <h3>Cardio Program</h3>
            <div class="doorway-action">
                <a href="http://vmpersonal.com/product/cardio-fitness-level-1/"><img src="http://vmpersonal.com/wp-content/themes/vmpersonal/images/doorway-action.png" alt="Watch Video Now" title="Watch Video Now" /> Watch Video Now</a>
            </div>
        </div>        
    </div>
</div>

我想使图形和包含它们的div响应.

它们包含在div.one-third容器中.

图像为409px x 292px,表示高度为71.39364303%宽度.

我想如果我使用CSS:

#doorway1 {background-image: url('images/doorway1.png'); height: 71.39364303%;}
#doorway2 {background-image: url('images/doorway2.png'); height: 71.39364303%;}
#doorway3 {background-image: url('images/doorway3.png'); height: 71.39364303%;}

div.one-third随着视口宽度的减小,它们会缩小,但它们没有,图像被切断.

当视口宽度减小时,如何保持图像宽高比保持一致？

帮助赞赏.

更新:AJ Funk帮助我缩小了背景图像,但是如何使包含它们的div按比例缩小？

Answer 1

你应该结合background-size: contain使用padding-bottomCSS技巧来保持宽高比.这可以如下工作.请注意,主要思路是background-size: contain和padding-bottom: 71.39364303%上.doorway的元素,与组合height: 0.其余的是最小的造型来说明这一点.

在链接的测试页面上应用它应该很简单.

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.textwidget {
  width: 100%:
  font-size: 0; /* to prevent space between inline-block doorways */
}

.one-third {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  width: 30%;
  padding: 20px;
}

.doorway {
  box-sizing: border-box;
  width: 100%;
  height: 0;
  padding-bottom: 71.39364303%;
  background-image: url('https://placehold.it/409x292');
  background-size: contain;
  border: 1px solid #000;
  font-size: 1rem; /* reset font-size */
}

<div class="textwidget">
  <div class="one-third">
    <div id="doorway1" class="doorway">
      <h3>The Best Core Exercise Ever</h3>
      <div class="doorway-action">
        <a href="#">Watch Video Now</a>
      </div>
    </div>
  </div>
  <div class="one-third">
    <div id="doorway2" class="doorway">
      <h3>Core Strength Level 1 Program</h3>
      <div class="doorway-action">
        <a href="#">Watch Video Now</a>
      </div>
    </div>
  </div>
  <div class="one-third">
    <div id="doorway3" class="doorway">
      <h3>Cardio Program</h3>
      <div class="doorway-action">
        <a href="#">Watch Video Now</a>
      </div>
    </div>
  </div>
</div>