Cómo escalar un tamaño de imagen en CSS?

En este artículo, vamos a aprender cómo para escalar un tamaño de imagen en CSS ? CSS le da propiedades de transformación para cambiar las propiedades de la imagen (o cualquier otro elemento).

Debe ser muchas veces cargar una imagen en su página web y les resulta demasiado grande o pequeño para el abeto en la página. Usted intente reducir la anchura y la altura para ajustarlo, pero con CSS3 no tener que hacer cálculos matemáticos.

Si usted tiene una imagen, CSS da a transformar propiedades para cambiar las propiedades de la imagen (o cualquier elemento) .

La propiedad transform en CSS tiene cuatro propiedades, escala , rotar , inclinación , transformar . Estas propiedades se utilizan para transformar las propiedades de visualización del elemento.

Tomemos un ejemplo, tiene el elemento de imagen en HTML como,

<img src='abc.jpg' class='image' />

hemos dado a este elemento un class para que podamos modificar sus propiedades CSS en los códigos CSS externos. Ahora, vamos a escribir código CSS class ella.

.image {
width: 100px;
height: 100px;
transform: scale(1.5);
}

Las propiedades de ancho y altura dan una dimensión inicial y en relación a la misma, que la escala de la imagen. Tenga en cuenta, que escala () es un transformar el valor de la propiedad . A mayor valor que 1 significa aumentar el tamaño por la relación y menos de 1 significa disminuir la escala por esta relación.

Supongamos que proporcionar el valor de 1,5, además de aumentar el tamaño a 150% de imagen original. Una proporción de 0,5 disminuirá el tamaño a 50% de la imagen original.

Cuando lo necesitamos?

Las transformaciones de escala son vistos generalmente en los sitios web de comercio electrónico, donde se amplía la imagen cuando ratón sobre ella. Las transformadas imagen para ampliar y acercar o alejar la imagen, haciendo que el producto se detalla. Aquí es demostración y ejemplo para mostrar.

DEMO

salida

How to scale a picture size in CSS? - 4

código HTML con CSS

<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS center elements example</title>
<!-- CSS code below -->
<style>
body {
text-align: center;
}
.img {
width: 100px;
height: 100px;
}
.zoom {
transform: scale(1.5);
}
.shrink {
transform: scale(0.5);
}
.effect {
transition: transform .2s;

}
.effect:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<h2>CSS Scaling an image</h2>
<h3>1. Original Image</h3>
<img src="http://2.bp.blogspot.com/-zVBRqQVVtNE/Vq7zpHgYG1I/AAAAAAAALhM/iBNycn84_nk/s1600/Square-Smiley.jpg" alt="" class="img">
<h3>2. Scale(1.5)</h3>
<img src="http://2.bp.blogspot.com/-zVBRqQVVtNE/Vq7zpHgYG1I/AAAAAAAALhM/iBNycn84_nk/s1600/Square-Smiley.jpg" alt="" class="img zoom">
<h3>3. Scale(0.5)</h3>
<img src="http://2.bp.blogspot.com/-zVBRqQVVtNE/Vq7zpHgYG1I/AAAAAAAALhM/iBNycn84_nk/s1600/Square-Smiley.jpg" alt="" class="img shrink">
<h3>4. Hover over image</h3>
<img src="http://2.bp.blogspot.com/-zVBRqQVVtNE/Vq7zpHgYG1I/AAAAAAAALhM/iBNycn84_nk/s1600/Square-Smiley.jpg" alt="" class="img effect">
</body>
</html>

Esperanza Te gusta este pequeño truco CSS. Si lo ha usado en su página web, háganoslo saber en los comentarios.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *