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

Question

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

Answer 1

使用CSS background-size: cover;来填充<div>,或者background-size: auto 100%;如果您只想匹配高度,并且不关心侧面是否过流或欠流:

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%;
}

<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>

此外,background-position: center;如果要裁剪图像,使用中心始终是焦点而不是左上角,请使用此选项.