Question

我正在开发个人投资组合网站，但在屏幕显示时无法移动图像。

很抱歉，如果我解释任何这个不好但我的内容是以图片为中心，当页面变小时，我希望图像按比例调整大小。（我以为flexbox这样做但我找不到答案）

<div class="photopage">
    <img src="images/titlepage.png">
</div>

这是正确的Html吗？或者我应该有一个图像。

目前我的CSS只是将img设置为10vw。我意识到，如果我希望所有内容在屏幕移动时保持居中和比例，那就不是要走的路。

Answer 1

您只想为图像提供某种相对宽度，以便相对于父图像的宽度，屏幕宽度（vw）等进行缩放。

使用它的容器来缩放图像的最简单方法就是使用max-width: 100%;。当父级调整大小时，图像将相对于父级宽度在其内部调整大小。

img {
  max-width: 100%;
}

<div class="photopage">
  <img src="http://i1-news.softpedia-static.com/images/news2/Our-Entire-Galaxy-Might-Be-One-Mammoth-Wormhole-Brainiacs-Say-470824-2.jpg">
</div>

以下是如何使用视口宽度缩放图像的示例。

img {
  width: 50vw;
}

<div class="photopage">
  <img src="http://i1-news.softpedia-static.com/images/news2/Our-Entire-Galaxy-Might-Be-One-Mammoth-Wormhole-Brainiacs-Say-470824-2.jpg">
</div>

Answer 2

这就是你想要做的吗？

[HTML]

<p>
   this is a paragraph
</p>

<br><br><br><br><br><br><br><br><br><br><br><br>

<p>
this is a paragraph
</p>

<br><br><br><br><br><br><br><br><br><br><br><br>

<p>
this is a paragraph
</p>

<br><br><br><br><br><br><br><br><br><br><br><br>

<p>
this is a paragraph
</p>

<br><br><br><br><br><br><br><br><br><br><br><br>

[CSS]

html {
background-image: url(https://cdn.pixabay.com/photo/2017/01/20/15/12/ring-nebula-1995076_960_720.jpg);
background-attachment: fixed;
}

p {
  color: #fff;
}

https://jsfiddle.net/hass/p3dk2t6k/

如何在页面移动时修复未移动的图像

2 个答案: