获得背景图像或文本以填充宽度，不重复，但不垂直拉伸 [英] get background image or text to fill width, not repeat, but not stretch vertically

问题描述

正如标题所说。如何获得背景图片，甚至文本填充宽度，不拉伸/垂直压缩，只是显示一次？我似乎不明白这一点。谢谢。

Just as the title says. How can I get a background image, or even text to fill width wise, not stretch/squash vertically, and just show up once? I can't seem to figure this out. Thank you.

编辑：我也希望高度按比例缩放图片的宽度，因此不会偏斜，而是以宽度缩放。

I also want the height to scale with the width of the picture proportionally, so it will not be skewed but scaled with the width.

推荐答案

如果你只希望背景img填充宽度，而不考虑你可以做的高度：

If you only want the background img to fill the width without taking into account the height you can do:

.element-with-back-img{
    background-repeat: no-repeat;
    background-size: 100%;
}

但是img不填充element-with- back-img，因为高度将设置为auto

but with this the img doesn't fill the height of element-with-back-img because the height will set to "auto"

通过这样做：

.element-with-back-img{
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

img填充高度，但如果element-with-back-img有不同比例比img，这将改变它的比例填充element-with-back-img

the img fills the height but if element-with-back-img has different proportions than those from the img, this one will change its proportions to fill the element-with-back-img

我推荐u到：

.element-with-back-img{
    background-repeat: no-repeat;
    background-size: cover;
}

这将背景图像缩放到尽可能大，被背景图像完全覆盖。背景图片的某些部分可能无法在背景定位区域内查看

this scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

我希望这可以帮助您

.test {
  background-image: url(http://placekitten.com/1000/750);
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: lightblue;
  height: 150px;
  display: inline-block;
}

#test1 {
  width: 200px;
}
#test2 {
  width: 100px;
}
#test3 {
  width: 300px;
}
.test:hover {
    background-position: center center;  
}

<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
<div class="test" id="test3"></div>

这篇关于获得背景图像或文本以填充宽度，不重复，但不垂直拉伸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！