Css 如何在所有不同的屏幕尺寸上保持相同的圆形图像比率/大小？

如何保持背景图像的相同比例，使其适合所有不同的屏幕尺寸？换句话说，如何确保背景图像始终看起来完全“居中”。请注意，我有几个其他屏幕与其他背景图像，因此解决方案应适用于不同的图像，而不仅仅是下面的房子

CSS:

这是所有屏幕尺寸的理想输出。完全对齐：

但是，当我调整大小并尝试不同的大小时，背景会放错位置，看起来不太好。看起来图像更偏右一些：

---

由于CSS告诉页面确保背景在宽度和高度上覆盖整个屏幕，这将导致屏幕中出现一些与图像纵横比不匹配的不规则情况。它必须伸展以覆盖第二个屏幕的整个高度，但“覆盖”在两个方向上都会缩放，因此它会不断增大图像大小，直到覆盖整个屏幕。如果您只想确保背景水平填充屏幕（并且不介意底部可能有空间容纳更高的屏幕），只需设置宽度以填充整个屏幕：

背景尺寸：100%自动

试试这个：

#background{
  background-image: url("../images/houses.png"); /* The image used */
  background-color: whitesmoke; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container*/
}

---

使用

背景位置：居中

将图像居中放置

#背景
元素
宽度：100vw
，使其适合窗口width@Ramineghbalian：使用现有代码的其余部分？
#background{
  background-image: url("../images/houses.png"); /* The image used */
  background-color: whitesmoke; /* Used if the image is unavailable */
  height: 500px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container*/
}