如何缩放容器内的图像

Question

伙计们，我一直在遇到一个问题，我创建了一个容器盒，但是我放入的图像要么被拉伸，要么图像的某些部分没有显示出来

我试图将盒子做得更大一些，但是它仍然会切除部分图像。我也尝试过对象适配，但似乎不起作用

500

<a href="#" class="onclick-coupon">click here to enter your email</a>

当我使用对象拟合时，我期望图像可以缩放，但事实并非如此。有什么想法吗？

Answer 1

如果您不希望截取背景图片，请使用background-size: contain代替background-size: cover

Answer 2

使用width：100％来防止图像拉伸，下面的代码可能是第二种情况。

.img-box {
  width: 100%;
  height: 600px;
  padding: 20px;
  margin: 100px auto;
  box-shadow: 0px 0px 10px grey;
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Flag_of_Pakistan.svg/800px-Flag_of_Pakistan.svg.png);
  background-size: cover;
  background-repeat: no-repeat;
}
.text{
  height:100%
}