¿Te ha pasado alguna vez que quieres mostrar una imagen en tu página web pero no logras que se vea centrada correctamente? Puede ser porque su tamaño es desconocido y eso dificulta la tarea. ¡Pero no te preocupes! En este artículo te enseñaremos varias formas de centrar una imagen de tamaño desconocido y hacer que luzca perfecta en tu sitio web. Sigue leyendo para conocer todos los detalles.
En este tutorial, vamos a ver una técnica para centrar el contenido vertical y horizontalmente donde el ancho y alto son desconocidos. Existen algunas técnicas que se pueden usar para lograr este objetivo, pero en este artículo, veremos uno de los métodos que se pueden usar usando CSS y jQuery.
El objetivo
El objetivo es centrar una imagen con un anchura y altura desconocidas. Para lograr el objetivo, el siguiente ejemplo incorporará una combinación de CSS y jQuery para centrar la imagen.
El enfoque que tomaremos es averiguar el valor del ancho y alto de la imagen lado del clienteluego aplique un margen negativo superior e izquierdo para compensar la posición de la imagen y tenerla centrada vertical y horizontalmente.
el html
Para este ejemplo, solo necesitamos unas pocas líneas de marcado HTML. Notarás a continuación que el imagen elemento está contenido dentro de un división elemento. Usaremos estilos CSS para establecer inicialmente el ancho y la altura del div, así como la posición superior izquierda de la imagen.
<div id="imageContainer">
<img id="img1" src="https://www.itgeared.com/center-image-unknown-width-height/images/image1.png" />
</div>el css
Se necesita muy poco CSS para diseñar el división y imagen elemento.
#imageContent {
position: relative;
height:500px;
background-color:#ababab;
}
#img1 {
position: absolute;
top: 50%;
left: 50%;
}En este punto, hemos colocado la esquina superior izquierda de la imagen en el centro del div. Sin embargo, necesitamos mover la imagen hacia arriba y hacia la derecha el 50% de su alto y ancho. En este momento, no sabemos cuál es ninguno de esos dos valores.
Esta es la posición de la imagen dentro de la división elemento. Observe que la esquina superior izquierda se coloca en el centro del elemento div.
El jQuery
Aquí es donde las cosas se ponen interesantes. Podemos usar jQuery para recopilar la ancho y altura del elemento de la imagen. Una vez que tengamos esa información, reposicionaremos dinámicamente el elemento usando jQuery del lado del cliente.
$(document).ready(function() {
$('#img1').load(function() {
// Get the target image...
var srcImg = $("#img1");
var newImage = new Image();
newImage.src = srcImg.attr("src");
var imageWidth = newImage.width;
var imageHeight = newImage.height;
// Prepre the top and left margin values, the values need
// to be negative to move the image up and left within the div.
var marginTop = -Math.abs(imageHeight / 2);
var marginLeft = -Math.abs(imageWidth / 2);
// Assign the new margins to the image.
$("#img1").css( {"margin-top": marginTop + "px", "margin-left": marginLeft + "px" });
});
});Si aplica un margen negativo de la mitad del ancho y la altura, la imagen se moverá hacia arriba y hacia la izquierda, como se muestra a continuación…
Ejemplo completo
Aquí está el marcado HTML, CSS y el código fuente de jQuery, todo puesto juntos en un archivo.
<!DOCTYPE html>
<html>
<head>
<style>
#imgContainer {
position: relative;
height:300px;
width:300px;
background-color:#ababab;
}
#img1 {
position: absolute;
top: 50%;
left: 50%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="imgContainer">
<img id="img1" src="https://www.itgeared.com/center-image-unknown-width-height/images/image1.png" />
</div>
<script>
$(document).ready(function () {
$('#img1').load(function () {
var srcImg = $("#img1");
var newImage = new Image();
newImage.src = srcImg.attr("src");
var imageWidth = newImage.width;
var imageHeight = newImage.height;
var marginTop = -Math.abs(imageHeight / 2);
var marginLeft = -Math.abs(imageWidth / 2);
$("#img1").css({ "margin-top": marginTop + "px", "margin-left": marginLeft + "px" });
});
});
</script>
</body>
</html>Error 403 The request cannot be completed because you have exceeded your quota. : quotaExceeded
