基本上我想在 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/