4

¿Por qué se descolocan los botones y textos en el margen derecho (arriba o abajo)? Quisiera que el texto y el boton estuvieran en el margen de la imagen. Creo no tener nada referente al div el cual sea más grande que la imagen en anchura. ¿Dónde está el error?

introducir la descripción de la imagen aquí

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
	  x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
.mySlides { display: none; }
			
#centrar
{
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	</head>
	
	<body>
		<div class="w3-content w3-display-container">
			<div class="w3-display-container mySlides">
				<img src="1.jpg">
				<div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black"> 
					Sala de estar
				</div>
			</div>

			<div class="w3-display-container mySlides">
				<img src="2.jpg">
				<div class="w3-display-topright w3-large w3-container w3-padding-16 w3-black">
					Desayuno
				</div>
			</div>

			<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
			<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
		</div>
	</body>
</html>

1 respuesta 1

3

Al no tener ninguna regla CSS que afecte a tus imágenes lo que te está ocurriendo es que se mantiene el tamaño de la imagen en sus proporciones reales. Si lo que quieres es que ocupe todo su contenedor debes decirles que ocupen el 100% del width de su padre.

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
	  x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
.mySlides { display: none; }
			
#centrar
{
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.mySlides img {
  width: 100%;
}
<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	</head>
	
	<body>
		<div class="w3-content w3-display-container">
			<div class="w3-display-container mySlides">
				<img src="https://i.ytimg.com/vi/2wNiM4LWMKc/maxresdefault.jpg">
				<div class="w3-display-topleft w3-large w3-container w3-padding-16 w3-black"> 
					Sala de estar
				</div>
			</div>

			<div class="w3-display-container mySlides">
				<img src="https://www.hogarmania.com/archivos/201204/estrenimiento-gato-bebe2-xl-668x400x80xX.jpg">
				<div class="w3-display-topright w3-large w3-container w3-padding-16 w3-black">
					Desayuno
				</div>
			</div>

			<button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
			<button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
		</div>
	</body>
</html>

2
  • Si hago eso si funciona pero lo que quiero es que el tamaño de la imagen sea el que tengo por defecto, el mismo que el de la imagen, y no darle el ancho del div sino el ancho de la imagen. ¿Me explico? Es decir, que la imagen quede en el centro de la pantalla y los botones < > en los margenes de la imagen
    – omaza1990
    Commented el 10 oct. 2019 a las 17:05
  • La respuesta es correcta pero en el caso que quiero no. Quiero que el tamaño de la imagen sea el que tengo, el de por defecto, no quiero que la imagen ocupe el width 100% del padre, sino quiero que esté por defecto.
    – omaza1990
    Commented el 10 oct. 2019 a las 22:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.