Question

在this page，有3＆＃34;门口＆＃34;图形：

<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-bottom CSS技巧合并到maintain aspect ratio。这可以如下工作。请注意，主要提示是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>

Answer 2

您需要将background-size设置为contain

#doorway1,
#doorway2,
#doorway3 {
  background-size: contain;
}

Answer 3

我相信你可以使用img {max-width:100%}来反复缩小图像。然后，为了缩小div，我不明白为什么它是必要的。 div标签不是为了自己的目的，只是因为你放在它里面的内容很重要。无论图像大小如何，链接都将保持图像的大小。这是因为链接由图像表示。

但是，如果您将需要操作的内容，h3等显示为块元素，这应该允许您使用

设置尺寸

.doorway h3{ //h3 is a child element of the class doorway
     display: block;//Or "inline-block", if you are using inline currently
     //Then you should be able to set the max-width or max-height whatever the case may be
     max-height: xx%;
}

使用您使用的百分比值的原因是因为说height: 71%并不意味着height: 71% of width它实际上意味着height: 71% of the viewport或设备屏幕/窗口的大小（取决于你设置视口的方式）所以你可以计算出你希望内容占用的视口量是多少，3个图像大约33.33％，所有3个占据所有屏幕，或者你可以使用像素这样的不同单位使用RWD（响应式网页设计）不那么友好，但如果你使用＆max;和＆＃39; min＆＃39;对于宽度，以及做一些其他调整，例如在任何可以使用的地方使用百分比。

我真的希望这有助于或者至少指出你正在寻找的答案。

Answer 4

您有两种选择：

这适用于响应（保留完整图像，无裁剪）：

img {
    max-width: 100%;
    height: auto;
}

这适用于背景图像（图像将裁剪）：

div { background-size: contain; }

另外，您可以查看一些根据窗口高度/宽度自动调整html元素大小的jquery插件。

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

4 个答案: