gpt4 book ai didi

html - 如何使用 CSS3 自动在屏幕上显示一个巨大的图像?

转载 作者:行者123 更新时间:2023-11-28 12:51:40 26 4
gpt4 key购买 nike

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

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

注意:1. 我没有放在 a 内,因为我不知道这是否是一个好的做法,但我在所有网站上都注意到了。2. 没有在标签中使用 width 和 height 属性,因为我不确定它对我有什么帮助。

现在图像非常大,我想通过以下方式自动适应桌面、iPad 或移动设备的任何屏幕:

  1. 横向,图像应占据整个屏幕
  2. 垂直方向,图像应占据屏幕的一半

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

我知道允许视口(viewport),但我想在 CSS3 中实现。这就是我所做的:

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

但是没有用。

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

Image
Text
Image
Text
.
.
.

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

最佳答案

背景大小是 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%; }

干杯,

阿肖克

关于html - 如何使用 CSS3 自动在屏幕上显示一个巨大的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23668960/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com