如何消除因照片而向左滚动的页面？

Question

目前，我正在尝试适合（裁剪） 网站移动版 图像，但没有结果。 ..

它在桌面上的外观 -

它在手机上的外观 -

由于 position: absolute; margin-left: 50%;、但是...，此页面向左滚动 ，因此在移动设备上裁剪了图片 -

我试过 object-fit，不同的 positions，等等，但没有成功。
应该怎么做？

Answer 1

在 picture element, or use object-fit 和 css 移动媒体查询中，根据屏幕大小使用两个不同的版本。

由于绝对位置加上边距，您会得到一个水平滚动条，这会将图像推到屏幕右侧（假设 100% 宽图像）。如果您想保持这种方式，请在 html 和 body 标签上使用 overflow-x: hidden。

Answer 2

没有图像能够处理所有随机视口纵横比。

在这个特殊的设计中，人物看起来 at/moving 朝向左侧的文本似乎很重要，因此处理窄肖像视口的常用方法是将 'header' 的一半在这种情况下，低于另一个是没有意义的。

因此，一个建议是将图形从背景中分离出来，并根据视口的方面 ratio/size 对其进行定位和调整大小。请记住，左侧的文本必须具有一定的最小物理尺寸才能可读，此代码段设置了最小绝对宽度以及图形在整个视口中所占的百分比。

显然，您需要更改此处的实际数字以获得窄设备和宽设备所需的布局，因此请将此处使用的数字视为仅用于演示。

此外，彩色背景可以是真实图像，因为考虑到它的设计，拉伸以使用封面是可行的，但在这个片段中，它是粗略地使用 CSS 绘制的，只是为了给出想法。该图已从问题中的给定图像中粗略切出，当然对于已发布的环境需要做得更好。

* {
  padding: 0;
  margin: 0;
}

.bg {
  --minw: 256px;
  /* minimum width we allow the left hand side (with the text) to go */
  --textw: max(var(--minw), 50vw);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: inline-block;
}

.bg::before,
.bg::after {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  background-repeat: no-repeat no-repeat;
}

.bg::before {
  width: 100vw;
  height: 100vh;
  background-image: radial-gradient(circle, rgba(160, 32, 240, .8), transparent), linear-gradient(to right, rgba(0, 0, 0, 0), #00B7EB), linear-gradient(to right, rgba(255, 0, 255, .6), rgba(160, 32, 240, .8));
  background-position: center center;
}

.bg::after {
  background-image: url(https://i.stack.imgur.com/655zI.png);
  background-size: contain;
  --pc: 80%;
  background-position: var(--pc) center;
  --w: calc(100vw - var(--textw));
  width: var(--w);
  left: calc(100vw - var(--w));
  margin: 5% 0;
  height: calc(100vh - 10%);
}

.text {
  height: 200px;
  width: var(--textw);
  position: relative;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.innertext {
  border: solid white 2px;
  color: white;
  padding: 5%;
}

@media screen and (max-aspect-ratio: 1 /1) {
  body::after {
    --pc: 90%;
  }
}

<div class="bg">
  <div class="text">
    <div class="innertext">HERE IS SOME TEXT</div>
  </div>
</div>

补充说明：背景附件：固定目前并未在所有浏览器上完全实现，因此背景被添加到给定位置固定的 div 上的伪元素。

如何消除因照片而向左滚动的页面？

How to remove page scrolling to the left because of a photo?

html

css

mobile

image

responsiveness