#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;
}
}