Question

我正在尝试在多个设备上保持某些图像的内联。我发现这出奇的棘手。

这是纵向手机。我想使用页面图像来接收一些文本，因此，我希望它与页面的横向外观更接近。

我尝试过

对象适合：封面对象适合：无

但是这些都不起作用。我需要先将所有div包装在容器中吗？

portrait mode

html {
    background: url('https://cdn.glitch.com/87ed8b1a-63dd-4b25-a90a-376a6af4b751%2Fbackground3.png?1547124819891') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: sans-serif;
    font-size: 16px;
}

/* ----- Structural Styles ----- */
 

.header {
    overflow: auto;
}

#header p{
    opacity: 255;
}


.hands {
  height: auto;
  width: auto;
  position: absolute;
  bottom: 0px;
  right: 0px;
  object-fit: none;
}

.container {
  
  justify-content: center;
    position: fixed;
    bottom: 80px;
    left: 38%;
    right: 33%;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>untitled</title>
    <meta name="author" content="">
    <meta name="description" content="">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
</head>


<body>
  <div class="hands">
  <img src="https://cdn.glitch.com/87ed8b1a-63dd-4b25-a90a-376a6af4b751%2FHands_paper3.png?1547124446277">
 
    <div class="container">
        
        <div class="header">
            <a id="myBtn" style="float: right;font-size: 1.5em;">&#9776; </a>
        </div>
        
        <div id="story"></div>
        
        <div id="myModal" class="modal">
            <!-- Modal content -->
            <div class="modal-content">
                <span class="close">&times;</span>
                <h1>Paused</h1>
                <p>Put information about your game here</p>
            </div>
        </div>
    
    </div>

    <script src="modal.js"></script>
    <script src="settings.js"></script>
    <script src="ink.js"></script>
    <script src="Brexit-Snatch.js"></script>
    <script src="main.js"></script>
  </div>
</body>

</html>

Answer 1

在手部图像上添加宽度：100％。希望这是您想要的。谢谢。

html {
    
}

body{
background: url('https://cdn.glitch.com/87ed8b1a-63dd-4b25-a90a-376a6af4b751%2Fbackground3.png?1547124819891') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: sans-serif;
    font-size: 16px;}
 

.header {
    overflow: auto;
}

#header p{
    opacity: 255;
}


.hands {
  height: auto;
  width: auto;
  position: absolute;
  bottom: 0px;
  right: 0px;
  object-fit: none;
}

.hands img{
width:100%}

.container {
  
  justify-content: center;
    position: fixed;
    bottom: 80px;
    left: 38%;
    right: 33%;
}

  <div class="hands">
  <img src="https://cdn.glitch.com/87ed8b1a-63dd-4b25-a90a-376a6af4b751%2FHands_paper3.png?1547124446277">
 
    <div class="container">
        
        <div class="header">
            <a id="myBtn" style="float: right;font-size: 1.5em;">&#9776; </a>
        </div>
        
        <div id="story"></div>
        
        <div id="myModal" class="modal">
            <!-- Modal content -->
            <div class="modal-content">
                <span class="close">&times;</span>
                <h1>Paused</h1>
                <p>Put information about your game here</p>
            </div>
        </div>
    
    </div>

使背景元素和div图像保持一致

1 个答案: