Question

我正在尝试调整背景图片的大小以适应div。我遇到的问题是我希望图像适合div的高度并保持比例。例如，我有一个div，我不希望它进一步增加屏幕的宽度（以防止滚动条出现）和我想要使用的图像是1024px X 400px。如果我试图适应图像的高度，它将强制宽度也适合它，它将失去比例。我不在乎图像的某些部分是否显示。事实上，这就是我想要做的事我需要使用什么标签？ HTML5或CSS

Answer 1

使用CSS background-size: cover;填充<div>或background-size: auto 100%;，如果您只想匹配高度，请注意如果方面过度或不足：

＆＃13;

html,
body {
  position: relative;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

div {
  background-image: url(https://placebear.com/1024/400.jpg);
  display: inline-block;
  background-repeat: no-repeat;
  border: 1px solid black;
}

.cover {
  background-size: cover;
}

.center {
  background-position: center;
}

.height {
  background-size: auto 100%;
}

＆＃13;

<h1>Unstyled</h1>
<div style="width: 50px; height: 200px"></div>
<div style="width: 200px; height: 50px"></div>
<div style="width: 125px; height: 125px"></div>

<h1>Un-centered</h1>
<h2>Cover</h2>
<div class="cover" style="width: 50px; height: 200px"></div>
<div class="cover" style="width: 200px; height: 50px"></div>
<div class="cover" style="width: 125px; height: 125px"></div>

<h2>100% Height</h2>
<div class="height" style="width: 50px; height: 200px"></div>
<div class="height" style="width: 200px; height: 50px"></div>
<div class="height" style="width: 125px; height: 125px"></div>

<h1>Centered</h1>
<h2>Cover</h2>
<div class="cover center" style="width: 50px; height: 200px"></div>
<div class="cover center" style="width: 200px; height: 50px"></div>
<div class="cover center" style="width: 125px; height: 125px"></div>

<h2>100% Height</h2>
<div class="height center" style="width: 50px; height: 200px"></div>
<div class="height center" style="width: 200px; height: 50px"></div>
<div class="height center" style="width: 125px; height: 125px"></div>

＆＃13;

此外，如果您想要裁剪图像以使中心始终是焦点而不是左上角，请使用background-position: center;。

Answer 2

如果您可以稍微降低比率阈值，您也可以使用：

img {
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  max-height: 100%;
}

调整图像大小，保持比例，HTML？

2 个答案: