Question

我正在为我的一位朋友设计一个HTML网站。

example.thoseitguys.co.za/template/expectations.html

该页面由于某种原因在右侧切割我的图像。

是否有一些我错过了限制图像大小或页面宽度的CSS？

Answer 1

为图片添加课程。类似的东西：

<img class="howWeDoIt" src="style/images/test.png" alt="" >

在CSS上执行：

howWeDoIt { width: 100%; }

Answer 2

将它放在一个div中并使宽度100％像这样：

<div>
    <img src="style/images/test.png" alt="" style="width: 100%">
</div>

Answer 3

如果您希望它完全缩放到屏幕上可见的内容，您应该执行类似于下面显示的操作。我在Garry的Mod服务器加载屏幕上使用了这种方法。它会缩放到您的屏幕尺寸。您可以在此处查看自动缩放的加载图片：http://nubsite.gaming.bz/images/loadingscreen.php

现在，您需要扩展到屏幕大小的代码：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <style>
      .bg {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -5000;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="[YOUR IMAGE URL HERE]" class="bg">
    </div>
  </body>
</html>

＆＃13;

图像被切断HTML

3 个答案: