如何使图像保持其比例独立于 div 内的浏览器大小？答案

【问题标题】：How can I make a image keep it's proportion independent of the browser size inside a div?如何使图像保持其比例独立于 div 内的浏览器大小？
【发布时间】：2020-08-10 06:46:20
【问题描述】：

所以我想要改变浏览器的大小并将背景的 img 保持为 100% 的宽度和高度以及 div 的内部，这是图像：

https://github.com/MestreALMO/NextLevelWeek2020Day06Plus/blob/master/_ReadmeImgs/searchingForThisEffect/Screenshot_3.png?raw=true

在需要的时候改变它的比例，这样它就不会像这样被拉伸：

页面压缩时的图像：https://github.com/MestreALMO/NextLevelWeek2020Day06Plus/blob/master/_ReadmeImgs/searchingForThisEffect/Screenshot_3.2.png?raw=true
页面拉伸时的图像： https://github.com/MestreALMO/NextLevelWeek2020Day06Plus/blob/master/_ReadmeImgs/searchingForThisEffect/Screenshot_3.3.png?raw=true

这是我的代码的一部分：

var backgroundLoginContainer01 = {
    backgroundImage: `url(${Background})`
}

那我这样称呼它：

<div style={backgroundLoginContainer01} />

【问题讨论】：

使用 backgroundSize: 覆盖
我没有得到它，我如何将它插入到sn-p中？

标签： css reactjs image jsx

【解决方案1】：

另一个（更好的）解决方案是将您的图像放在<picture> 标签中，然后使用适当的“object-fit:cover”设置图像的样式。你会发现这个解决方案很详细here 和here。

编辑：

鉴于您在编辑中提供的示例，我认为您正在寻找的是background-size: 100% 100%;。看下面的演示。

div {
    background-image:url('https://via.placeholder.com/150');
    background-repeat:no-repeat;
    background-size:100% 100%;
    height: 30vh; 
    width: 30vw; 
}

<body>
<div>

</div>
</body

【讨论】：

对于你所说的，我认为我刚刚做的 sn-p 代码应该可以工作，但它没有
嗨@MestreALMO，看看我的编辑。让我知道是否有帮助。

【解决方案2】：

var backgroundLoginContainer01 = {
    backgroundImage: `url(${Background})`,
    backgroundSize: 'cover',
}

如果你想使用 css

.bg {
  background-image: url("https://raw.githubusercontent.com/MestreALMO/NextLevelWeek2020Day06Plus/700f9f9524fee4dff926fe26cfa33ef92b9e0457/web/src/assets/images/success-background.svg");
  background-size: cover,
}

check this example

【讨论】：

这很好，但它确实不是我想要的，img 正在被切割以适合我希望它自行压缩的 div，因此 100% 的图像将完全显示次。我将编辑原始消息并在其中插入一些我正在寻找的效果的图像
检查这个jsbin.com/welcome/1/edit?html,css,output改变内容的宽度和高度