gpt4 book ai didi

html - 如何使用CSS在屏幕上动态调整图像

转载 作者:行者123 更新时间:2023-11-28 09:37:19 25 4
gpt4 key购买 nike

大家好,这是一个重复的问题,但我花了一天时间寻找答案,但没有找到我要找的东西。

问题很简单:

我有一个简单的HTML页面,我想为它设置一个背景,随时覆盖整个屏幕。然后,我想将图像放在屏幕上,始终位于中心,并在更改窗口大小时调整大小。

像这样:

enter image description here

我的问题是我无法按高度修复图像,因为我的背景图像很宽,可以覆盖任何屏幕,而“我的图像”很高,我希望它始终显示在屏幕上。

(注意灰色部分是背景图的溢出部分,因为它很宽,覆盖了整个屏幕)

tnx 寻求帮助。

最佳答案

好的,这是重新访问您网站的代码:

<!DOCTYPE html>
<html lang="en">
<head>
<title>گالری کاکتوس</title>
<meta charset="utf-8">
<style type="text/css">
html, body {
height: 100%;
}
body {
background-image: url(http://cactuspics.com/content/wp-content/themes/mobile/images/4.jpg);
background-size: cover;
}
#image {
width: 100%;
height: 100%;
background-image: url(http://cactuspics.com/content/wp-content/themes/mobile/images/body.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
}
</style>
</head>
<body>
<div id="image"></div>
</body>
</html>

漂亮干净:)

关于html - 如何使用CSS在屏幕上动态调整图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25482406/

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