Crear una página receptiva en la que el usuario tenga una imagen colocada a la derecha del control deslizante de rango en la vista de escritorio. Pero en la vista móvil, la imagen se superpone con el control deslizante.
Use columnas de cuadrícula como Bootstrap pretendía resolver este problema. Establezca la columna de rango en pull-right para la vista de escritorio y flex-column-reverse para configurar la imagen sobre el control deslizante en la vista móvil.
Agregue una fila y una columna:
<div class="row flex-column-reverse flex-md-row"> <div class="col-xs-12 col-sm-6 pull-right"> <div class="input"> <div class="slidecontainer"> <input type="range" min="0" max="100" value="100" id="rangeid1"> </div> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="output"> <img src="Image.png" class="img-fluid float-right" id="imgid" width="275" height="95" > </div> </div> </div> </div>
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
place the image above the slider
in mobile view in bootstrap
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link rel="stylesheet"
type="text/css"
href="draft.css">
<script src=
"https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous">
</script>
</head>
<style>
body {
margin-top: 1rem;
margin-left: 2rem;
margin-right: 2rem;
}
.input {
margin-top: 3rem;
}
#rangeid {
padding: 0.5rem;
}
</style>
<body>
<center>
<div class="container">
<h1 style="color:green" class="Hclass">
GeeksforGeeks
</h1>
<div class="row flex-column-reverse flex-md-row">
<div class="col-xs-12 col-sm-6 pull-right">
<div class="input">
<div class="slidecontainer">
<input type="range"
min="0" max="100"
value="100"
id="rangeid1">
</div>
<div class="slidecontainer">
<input type="range"
min="0" max="100"
value="0"
id="rangeid">
</div>
<div class="slidecontainer">
<input type="range" min="0" max="100"
value="0"
id="rangeid">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="output">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190710123529/GeeksforGeeksLogoHeader1.png"
class="img-fluid float-right"
id="imgid"
width="275"
height="95">
</div>
</div>
</div>
</div>
</center>
</body>
<script>
var ranger = document.getElementById('rangeid1');
var image = document.getElementById('imgid');
var width = image.width;
var height = image.height;
ranger.onchange = function() {
image.width = width * (ranger.value / 100);
image.height = height * (ranger.value / 100);
}
</script>
</html>
Salida:
Vista de escritorio:
Vista móvil:
Publicación traducida automáticamente
Artículo escrito por Pritesh Ranjan 1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA