gpt4 book ai didi

javascript - 我怎样才能使一个盒子适合 css 中的图片(观看视频以了解我的意思)

转载 作者:可可西里 更新时间:2023-11-01 15:00:58 24 4
gpt4 key购买 nike

基本上我想在 iphone X 皮肤后面放一个屏幕。我如何缩放它以使其完美适合并适应缩放。深灰色框是屏幕。基本上,这样的事情是我的最终目标。 https://live.hqt.space/login

我的 HTML:

body {
background-image: url("https://www.xmple.com/wallpaper/linear-gradient-green-purple-1920x1080-c2-00ff7f-7b68ee-a-255-f-14.svg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size:cover;
}

.Containerforlogin {
width: 40%;
height: 80%;
background: rgba(0, 0, 0, 0.5);
color: #fff;
top: 50%;
left: 50%;
position: sticky;
transform: translate(-50%,10%);
box-sizing: border-box;
}

img {
margin: auto;
display: block;
margin-left: auto;
margin-right: auto;
position: sticky;
}
<div class="Containerforlogin">
<img src="http://i63.tinypic.com/34pi1c6.jpg" alt="Image and video hosting by TinyPic">
</div>

最佳答案

如果您只想将 iPhone X 屏幕的图像放入 div 中,一种方法是将位置更改为绝对位置,然后将高度和宽度更改为 100%。但是,使用您当前的代码无法将文本实际放入 iPhone X 屏幕。

这是我对您的要求的解释:

HTML:

<!DOCTYPE html>
<html>
<head>
<title>🤑 Cold Hard Trivia </title>
<link rel="stylesheet" href="Styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="Containerforlogin">
<img src="http://i63.tinypic.com/34pi1c6.jpg" border="0" alt="Image and video hosting by TinyPic">
</div>
<div id="inside-phone-screen">Text for login</div>
</body>
</html>

CSS:

body {
background-image: url("https://www.xmple.com/wallpaper/linear-gradient-green-purple-1920x1080-c2-00ff7f-7b68ee-a-255-f-14.svg");
background-attachment: fixed;
background-repeat: no-repeat;
background-size:cover;
}
.Containerforlogin {
width: 50vw;
height:90vw;
background: rgba(0, 0, 0, 0.5);
color: #fff;
left:50%;
transform:translate(-50%,10%);
position: sticky;
box-sizing: border-box;
border-radius:10vw;
}
img {
margin: auto;
position:absolute;
width:100%;
height:100%;
}
#inside-phone-screen{
padding:20% 10%;
}

关于javascript - 我怎样才能使一个盒子适合 css 中的图片(观看视频以了解我的意思),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50321150/

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