时间戳

首页 > 解决方案 > 如何在 html/css 中定位适合移动浏览器的图像

html - 如何在 html/css 中定位适合移动浏览器的图像

问题描述

我有一个相当简单的小网站。它只是一个基于某些交互而更新的图像，以及我在其上放置文本的第二个图像。总而言之，它在桌面浏览器上看起来不错，但在移动设备上却很糟糕。我唯一希望看到这个小项目的人会在移动浏览器上查看。

我认为最坏的情况（可能是最简单的）我可以将图片排列在另一个之上，这样当在移动设备上打开时它看起来会很好（现在它们并排并在移动设备上被挤在一起）。但是，如果有某种方法，我实际上可以让它看起来很好，这将是一个更好的学习体验。

我真的不熟悉，但这里是 CSS：

.mainImage {

  position: absolute;

 border: 5px outset #8306C1;
  text-align: center;
  color: black;
}

.container {

  position: absolute;

  top: 500;
  left: 100px;
  text-align: center;
  color: black;
}

以下是相关的html：

<img id = "mainImage" class = "mainImage" src="./starterImage.jpg" width="381" height="675" top="30";
  left=850";>

<div class="container">
 <img id = "scroll" class = "scroll" src="./scroll.png" width="500" height="500">
  <div id="centered" class="centered">Happy 10 year anniversary Hanna!</div>
  <div id="centered1" class="centered1"></div>
   <div id="centered2" class="centered2"></div>
    <div id="centered3" class="centered3"></div>
     <div id="centered4" class="centered4"></div>
     <div id="centered5" class="centered5"></div>
     <div id="centered6" class="centered6"></div>
     <div id="centered7" class="centered7"></div>
     <div id="centered8" class="centered8"></div>
     <div id="centered9" class="centered9"></div>
     <div id="centered10" class="centered10"></div>
     <div id="centered11" class="centered11"></div>
     <div id="centered12" class="centered12"></div>
     <div id="centered13" class="centered13"></div>
     <div id="centered14" class="centered14"></div>
      <div id="centered15" class="centered15"></div>
      <div id="centered16" class="centered16"></div>
      <div id="centered17" class="centered17"></div>
      <div id="centered18" class="centered18"></div>


</div>

我试图将它包含在标题中，但它没有帮助我：

<meta name="viewport" content="width=device-width, initial-scale=1" />

任何帮助，将不胜感激 ：）。该网站只是顶部的标题标题，左侧的图像，上面有各种文本，具体取决于右侧的图像，下方的按钮可以更改图像/文本。

标签： htmlcss

解决方案

你在那里做了很多事情，所以我从头开始......如果你能确认这是你在我可以编辑这篇文章并解释我做了什么之后的效果。（粉色框其实是背景图）

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 500px;
  max-width: 100vw;
  min-height: 500px;
  background-image: url('http://via.placeholder.com/500/ff00ff')
}

.overlay-box {
  text-align: center;
}
<div class="container">
  <div class="overlay-box">
    <img src="http://via.placeholder.com/250">
    <p>
      Ay bb wan sum?
    </p>
  </div>  
</div>

推荐阅读