Блог

Главная - Вопросы по программированию - Выравнивание двух изображений друг над другом при использовании мобильных устройств

Выравнивание двух изображений друг над другом при использовании мобильных устройств

#html #css

#HTML #css

Вопрос:

У меня есть страница, на которой расположены 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:UsersUserGoogle DriveSGroupWebsiteimg2re2.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:UsersUserGoogle DriveSGroupWebsiteimg1re222.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>

Комментарии:

1. ОБНОВЛЕНИЕ: он работал с использованием bootstrap. Я завернул два изображения в <div class=»container-fluid»> и добавил class=»col-sm-4″ к тегу div каждого изображения. Не забудьте связать bootstrap в head, чтобы он работал.

Ответ №1:

Вы можете использовать правило @media для определения размера экрана и кода, необходимого для мобильных устройств

Например:

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