在 CSS 中设置调整背景图像大小的原点答案

【问题标题】：Set an origin point for resizing a background image in CSS在 CSS 中设置调整背景图像大小的原点
【发布时间】：2018-06-01 06:37:22
【问题描述】：

我希望图像尽可能具有响应性，因此它们会根据设备调整大小。但是有一张图像我想保持中心作为调整大小的原点。

例如，如果图片是一个小房子，图片的右中部有一棵附近的树，我希望图片围绕该房子和附近的树调整大小，而不是从左上角（即本机调整大小点）。

我的图像当前设置为带有background-size: cover 的div 的背景图像。

这可以在 CSS 中完成吗？

我查看了 background-origin，但我没有看到它如何回答我的问题。

【问题讨论】：

标签： css image responsive-design resize

【解决方案1】：

原图：https://i.ytimg.com/vi/pd9LAZk9V1c/maxresdefault.jpg

您可以使用background-position:center 属性将其对齐到中心。您也可以使用background-size 来调整相对于容器的图像大小。

.bg {
  background: url("https://i.ytimg.com/vi/pd9LAZk9V1c/maxresdefault.jpg");
  background-repeat: no-repeat;
  width: 500px;
  height: 500px;
  background-position: center;
}

.bg2 {
  background: url("https://i.ytimg.com/vi/pd9LAZk9V1c/maxresdefault.jpg");
  background-repeat: no-repeat;
  width: 500px;
  height: 500px;
  background-position: -20px 60px; /* Xvalue Yvalue */
}

<div class="bg"></div>
<br>
<br>
<div class="bg2"></div>

【讨论】：

我的问题更多是在响应方面：当屏幕变小时，图片的某些元素必须消失。在您的示例中，我希望图像围绕树干调整大小，因此无论使用何种设备，它始终位于中间。或者我觉得对我的设计很感兴趣的某片叶子。关键是，我愿意选择它。
@Solomai 这是一个以图片为背景的 div，而不是其中包含的某些图像。让它响应的唯一方法是完全调整 div 的大小，你不能采取某些方面并希望 div 被截断但背景不会。