Question

我的home.html看起来像这样：

<!DOCTYPE html>
<html>
    <head><title>Title</title></head>
    <body>
        <img class="mod" src="image.jpg" alt="">
    </body>
</html>

注意： 1.我没有把它放进去，因为我不知道这是一个好习惯，但我已经注意到它在所有的wesites中。 2.没有在标签中使用宽度和高度属性，因为我不确定它对我有什么帮助。

现在图像非常庞大，我希望通过以下方式自动适应桌面，iPad或移动设备的任何屏幕：

如果在垂直缩放时裁剪图像的部分是可以的。

我知道允许视口，但我想在CSS3中这样做。这就是我所做的：

img.mod { margin:0; padding:0; border:0; background-size:100% }

但它不起作用。

我希望我的网页看起来像这样：

Image
Text
Image
Text
.
.
.

图像应完全适合宽度，无需滚动。

Answer 1

背景大小是CSS3属性，但它仅适用于背景图像。在你的情况下，你应该做一些如下所示的事情：

body, html{ height:100%;}
img.mod { margin:0; padding:0; border:0; width:100%; height:50%; }

如果您希望使用后台实现此功能，请使用以下代码：

body, html{ height:100%;}
body { margin:0; padding:0; border:0; background:url(**yourimage**.png) top left no-repeat; background-size: 100% 50%; }

干杯，

阿肖克

Answer 2

更改

background-size:100%

到

width:100%

这将使图像在屏幕上水平放置。请注意，高度将自动调整以保持与宽度成比例。试图将高度设置为50％将导致图像失真，因为机会是100％的身体X 50％的身体不是图像的自然尺寸。

要以50％裁剪图像，有几个选项。您可以谷歌寻找其他人，但我之前使用的方法是将图像包装在一个具有如下样式的容器中：

.container {
    height:50%;
    overflow:hidden;
}