Escalar una imagen en HTML

1. Escale una imagen de gran tamaño dentro de la ventana gráfica del navegador en HTML
2. Utilice las propiedades de width y min-width para escalar una imagen en HTML

En este tutorial, ilustraremos métodos para escalar imágenes de gran tamaño en HTML.

Escale una imagen de gran tamaño dentro de la ventana gráfica del navegador en HTML

Podemos escalar una imagen grande en HTML usando las propiedades width y height de la imagen. Una imagen de gran tamaño saldrá del borde de la pantalla. Para escalar la imagen al tamaño de la ventana gráfica, podemos usar un contenedor y establecer sus propiedades de height y width en la altura y la anchura de la ventana gráfica. Podemos usar las unidades vh y vw para establecer el tamaño. Una unidad de vh y vw corresponde al 1% de la altura y el ancho de la ventana gráfica. Podemos establecer la altura y el ancho de la imagen usando la configuración a 100%. La imagen debe insertarse dentro del contenedor. Luego, la imagen de gran tamaño encajará en la ventana gráfica.

Por ejemplo, cree un div en HTML con la clase container. Dentro del div escriba la etiqueta img e inserte una imagen de gran tamaño. En CSS, seleccione la clase container y establezca su height y width en 100vh y 100vw. A continuación, seleccione la etiqueta img y establezca su height y width en 100%.

En el siguiente ejemplo, escalamos una imagen grande para que quepa en la ventana gráfica usando unidades como vh, vw y %.

Código de ejemplo:

<div class="container">
    <img src="https://images.all-free-download.com/images/graphiclarge/large_mushroom_199318.jpg" >
</div>

.container{
  height:100vh;
  width: 100vw;
}
img {
 width : 100%;
 height: 100%; 
}

Utilice las propiedades de width y min-width para escalar una imagen en HTML

Podemos utilizar las propiedades width y min-width para escalar una imagen en HTML. Podemos usar estas propiedades mientras aplicamos estilo a la etiqueta <img>. La propiedad width especifica el ancho del elemento. La propiedad min-width especifica el ancho mínimo del elemento. Solo se aplicará si el contenido es menor que el ancho mínimo. De lo contrario, esta propiedad no tendrá ningún efecto. Además, esta propiedad también evita que el valor de la propiedad width sea menor que min-width. Denotamos el width y el min-width en píxeles en este método.

Por ejemplo, dentro del cuerpo HTML, escriba la etiqueta <img>. Dentro de la etiqueta <img>, especifique la ruta a la imagen mediante el atributo src. Luego, dé width de 25vw y min-width de 140px en el atributo style. Luego, cierre la etiqueta <img> seguida de todas las etiquetas abiertas anteriormente.

Hemos utilizado las propiedades width y min-width para escalar la imagen. La imagen de gran tamaño que no cabe en la ventana gráfica puede caber en la ventana gráfica. El ancho de 25vw en el ejemplo siguiente muestra que el ancho corresponde al 25% del ancho de la ventana gráfica. De esta forma, podemos escalar la imagen usando la etiqueta style en HTML.

Código de ejemplo:

<img src="/img/DelftStack/logo.png" style="width: 25vw; min-width: 140px;" />