logo标签列表

CSS: 当视口宽度减小时保持图像纵横比

css
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 等比例缩小呢？

请将您当前divs的CSS发布出来。 - disinfor
4个回答
7
你应该将 background-size: contain 与 padding-bottom CSS 技巧相结合，以 保持宽高比。这可以按以下方式工作。请注意，主要思想是在 .doorway 元素上使用 background-size: contain 和 padding-bottom: 71.39364303%，结合 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>

1
您需要将 background-size 设置为 contain。
#doorway1,
#doorway2,
#doorway3 {
  background-size: contain;
}
谢谢！我有.doorway {height: 292px;}。当视口减小时，如何设置高度向下缩放？ - Steve
@Steve 你可能想要使用媒体查询 https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries - AJ Funk
谢谢。我已经使用了媒体查询，但是将高度设置为百分比却彻底失败了。例如，背景图片的高度是宽度的70％，而背景图片的宽度是“ one-third” div的100％，但是如果我在CSS中设置高度（height: 70％;），div和背景图片会变得非常小，这让我感到困惑。 - Steve
通常最好设置宽度（例如 width: 100%;），并保留 height:auto;，然后您需要确保图像具有相同的纵横比，以便它们可以一起适当地缩放。 - AJ Funk
但是 div 内部有内容，该内容不会受到 div 减小高度的限制... - Steve
你可以使用媒体查询来缩小这些元素的大小，例如改变字号、宽度等。 - AJ Funk
1
我相信您可以使用img {max-width:100%}来使图像具有响应性的缩放能力。至于缩小div，我看不出为什么有必要这样做。div标签本身没有实际用途，仅因您放入其中的内容而变得重要。无论图像大小如何，链接将保持与图像大小相同。这是因为链接由图像表示。
但是，如果您将需要操作的内容（如h3等）显示为块元素，这应该允许您使用 width 和 height 属性设置它们的尺寸。
.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%。实际上，它意味着height: 视口的71%或设备屏幕/窗口的大小（取决于您设置视口的方式）。因此，您可以计算所需内容占用的视口量，3张图像大约占用全部屏幕的33.33％，或者您可以使用像素等不同的单位，这对响应式网页设计(RWD)来说效果不佳，但如果您在宽度处使用'max'和'min'，并进行其他一些调整，例如尽可能使用百分比，那么也可以使用像素。我真诚地希望这有所帮助，或者至少指向了您正在寻找的答案。
0
你有两个选择： 响应式工作方式（保留完整图像，不裁剪）：
img {
    max-width: 100%;
    height: auto;
}

这是用于背景图片的工作（图片将被裁剪）：

div { background-size: contain; }

否则，您可以查看一些jQuery插件，根据窗口的高度/宽度自动调整HTML元素的大小。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接