在这个页面上,有三个“门户”图形:
<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 等比例缩小呢?
divs
的CSS发布出来。 - disinfor