时间戳

首页 > 解决方案 > 在移动设备上对齐两个图像

html - 在移动设备上对齐两个图像

问题描述

我有一个页面，其中包含 2 个彼此相邻的响应图像（当浏览器调整大小时，它们会在保持纵横比的同时自动更改大小），这对桌面非常有用。但是，我希望它们在手机上自动对齐：一个图像应该在顶部，而另一个图像应该在它下面。

我怎样才能做到这一点？帮助表示赞赏。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.container {
  position: relative;
  width: 50%;
}

.image1 {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.image2 {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #A4CE8C;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.5;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

.text1 {
  white-space: nowrap; 
  color: #006400;
  font-size: 7vw;
  position: absolute;
  overflow: hidden;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.text2 {
  white-space: nowrap; 
  color: #006400;
  font-size: 7vw;
  position: absolute;
  overflow: hidden;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

</style>
</head>
<body>

<div class="container col-sm-6" style="float:right; margin: 1px 0px 0px 0px; min-width: 50%;">
  <img src="C:\Users\User\Google Drive\SGroup\Website\img2re2.jpg" alt="Avatar" class="image1 img-responsive">
  <div class="overlay" >
    <div class="text1"><a href="http://safa-group.com" style="color:black; font-family: 'Raleway'; color: #006400;"><b>S Marble</b></a></div>
  </div>
</div>
<div class="container col-sm-6" style="float:left; margin: 1px 0px 0px 0px; min-width: 50%;">
  <img src="C:\Users\User\Google Drive\SGroup\Website\img1re222.jpg" alt="Avatar" class="image2 img-responsive">
  <div class="overlay">
    <div class="text2"><a href="http://safa-group.com" style="color:black; font-family: 'Raleway'; color: #006400;"><b>S Steel</b></a></div>

</div>
</div>
</body>
</html>

标签： htmlcss

解决方案

You can use @media rule for detecting the screen size and the code the desired for mobile

Eg:

@media only screen and (max-width: 768px) {
    .container { 
        display:flex;
        flex-direction: column;
    }
}

推荐阅读