javascript - tamaño - mostrar imagen en html

¿Cómo doble el tamaño de una imagen en una página web?

Question

Tengo una imagen, digamos de 320 x 240 píxeles de tamaño, que quiero mostrar el doble de tamaño (es decir, 640 x 480 píxeles) en una página web. En el pasado, lo he hecho configurando width=640 en la etiqueta img .

Sin embargo, acabo de detectar lo siguiente en la especificación HTML :

Los atributos de dimensión no están diseñados para estirar la imagen.

En ese caso, ¿cómo puedo duplicar el tamaño de una imagen en una página web sin ir contra lo que pretenden las especificaciones?

Answer 1

Los atributos de dimensión no están diseñados para estirar la imagen.

Como ya mencionaste, usar el atributo de ancho no pretende estirar la imagen. así que en ese caso deberíamos usar transform: scale(2); lo que es una buena idea, pero también puede generar conflictos con respecto a la imagen que se superpone a otro contenido, por lo que la mejor idea es usar 2x de div con imagen a escala 2x con la propiedad css '' transform: scale(2); ''

Por lo tanto: usar el estilo de abajo debe ser una buena idea.

.img2x_container {
width: 640px;
height: 480px;
}
.img2x_container img {
transform: scale(2);
}

Este caso de uso solo es beneficioso cuando conocemos la altura y el ancho de la imagen.

Answer 2

CSS truco, estableciendo una sola propiedad

Si quieres usar CSS, hay una muy buena manera:

img#image_id {
width: calc(2 * 320px);
height: auto; /* This can be omitted */
}

Esto es muy útil, ya que puede cambiar la escala de la imagen cambiando solo un número (es decir, el factor). No se preocupe por la altura de la imagen, será configurada automáticamente por el navegador, incluso si omite configurar la altura de la imagen en automático (porque auto es el valor predeterminado de ancho y alto; vea this y this ). Además, puede establecer la altura en lugar de establecer el ancho.

De alguna manera, sería útil para el diseño responsivo, ¡y creo que es realmente complicado!

Nota : No funciona con las cajas flexibles, si establece el ancho o la altura de los padres. En este caso, debe establecer explícitamente el ancho y el alto, o habría otros trucos para eso; Las cajas flexibles funcionan de manera completamente diferente.

Answer 3

¡Las cosas más complejas están escondidas en las más simples!

Lo que significan para mí con esta frase es "cuidar la escalabilidad".

Y para eso, no hay nada mejor que svg . Tenemos que pensar en el almacenamiento en caché. Solo evita incrustarlos directamente. Deje que el navegador del cliente haga el almacenamiento en caché utilizando src externo.

Tan pronto como esto esté bien hecho, podemos escalarlo al tamaño de la luna , manteniéndolo suave ...

Svg se puede generar en el servidor, pero siempre es mejor crearlos cuidadosamente con (gimp). Luego abre el svg con un editor de texto.

Si utiliza imágenes, actualmente, para una representación agradable en una resolución de pantalla diferente, lo mejor debería ser usar un conjunto de ellas en una resolución diferente, con srcset . Finalmente, al igual que otros elementos dinámicos, deje que el navegador del cliente haga la elección proporcionándole muchas opciones. De nuevo, con el caché en mente. descargará y conservará solo el que necesita.

Si existe una solución html, deberíamos usarla antes de intentar modificarla (por js o css).

https://css-tricks.com/responsive-images-css/

Una nueva propiedad css está en la ciudad: renderizado de imágenes .

https://drafts.csswg.org/css-images-3/#the-image-rendering

Como de costumbre, la respuesta más completa son las especificaciones!

https://drafts.csswg.org/css-images-3

Answer 4

A través de CSS, idealmente en una hoja de estilo, pero en el atributo de style si es necesario.

Por ejemplo, aquí está su gravatar 32x32 estirado a 128x128:

.stretch-128 {
width: 128px;
height: 128px;
}

<img src="https://www.gravatar.com/avatar/6b938dc4205cd0cea4e4e68451c42a21?s=32&d=identicon&r=PG" class="stretch-128">

Naturalmente, cada vez que estire una imagen como esa, es probable que la calidad sufra.

Answer 5

Aquí hay una lista de cosas que quiere evitar al cargar una imagen:

• FOUC : esto sucede cuando el navegador no tiene el tamaño de la imagen antes de cargarla (en cuyo caso no le asigna ningún espacio hasta que esté completamente cargada) o le dice al navegador el tamaño incorrecto
• distorsión (mostrar una imagen con una relación de aspecto diferente a 1: 1)
• pixelación (mostrando una imagen en un tamaño significativamente mayor que su tamaño nativo)
• cargando imágenes con un tamaño nativo significativamente más grande que el tamaño en la página: ralentizan la página y consumen un ancho de banda innecesario

Hay formas de lidiar con cada uno de los anteriores.

Para evitar FOUC , hay algunos métodos:

• guarde los tamaños (o proporción) de la imagen, además del archivo, para que pueda asignar el espacio correcto en el flujo de la página, antes de cargar las imágenes (WP hace esto de forma inmediata, por ejemplo, y la mayoría de los temas lo utilizan para evitar FOUC)
• cargue la imagen en un contenedor, como imagen de background-size: cover , por lo que FOUC no es posible, ya que el documento ya conoce el tamaño del elemento, antes de que se cargue la imagen. Esta técnica también tiene la ventaja de no mostrar los anclajes de imagen rotos cuando una imagen no se carga. Además, esta técnica se usa ampliamente hoy en día en diseños de imagen de pantalla completa, algunos de ellos con efecto de paralaje. Tiene la desventaja de recortar la parte superior / inferior o izquierda / derecha, dependiendo de la diferencia de relación de aspecto entre el contenedor y la imagen.
• cargue la imagen en una position:absolute contenedor centrado position:absolute y cuando tenga su tamaño (y pueda calcular la posición exacta en el flujo del documento), anime su escala de 0 a 1 y al mismo tiempo anime el tamaño de su contenedor desde "predeterminado" hasta el tamaño adecuado.

En cuanto a la distorsión , no hay mucho que decir, excepto que no lo hagas. Cualquier otra opción es mejor que la distorsión: recorte, pixelación, incluso FOUC. Básicamente, la distorsión dice: "No confíes en mí con las tareas de diseño. No puedo decir nada de Donts" , lo que, para muchos, se traduce en: "No estoy calificado para el desarrollo profesional de frontend. Me viene, muy probablemente sin saberlo " .

En la pixelación . Es complicado: quieres que la página se cargue lo más rápido posible, pero también quieres imágenes nítidas. Cuando se trata de imágenes de fondo muy grandes, un buen truco es agregar un patrón sobre la imagen (rayas, puntos o cualquier otro patrón semitransparente, un toque artístico para hacer que la pixellación sea mucho menos notable).

Otra técnica buena e inteligente para obtener lo mejor de ambos mundos (velocidad y calidad de imagen) es:

• cargue una versión proporcional en miniatura para cada imagen debajo del pliegue (sí, se verán pixeladas) y .65 opacidad de .65 . Lazy carga las imágenes a tamaño completo antes de que se desplacen a la vista. Incluso si la versión pixelada es visible por un corto tiempo, será reemplazada por una de tamaño completo, creando un efecto de enfoque, junto con el cambio de opacidad a 1 . Si tiene calidad, imágenes sobresalientes, realmente desea este efecto (a) porque las hace sobresalir yb) porque desea cargar las imágenes en un tamaño adecuado y nítido. Las imágenes se verán "vivas" y obtendrán un enfoque sutil, dejando a los visitantes con la impresión de ver un sitio web altamente sofisticado.

Evite sobredimensionar . Aquí, src-set entra en juego, combinado con los cargadores de miniaturas descritos anteriormente. Y, por supuesto: carga perezosa. Siempre carga perezosa cualquier cosa debajo del pliegue. Eso hace una gran diferencia.

En resumen, así es como se cargan correctamente las imágenes. En realidad, es un tema enorme, ni siquiera he tocado la optimización, los formatos raster vs vectores, svg o webp.

Answer 6

En general, no he encontrado un artículo que proporcione una forma de escalar imágenes con tecnologías del lado del cliente (deje el mecanismo del navegador ) sin perder algo de calidad.

Dicho esto, me temo que si desea la mejor manera de duplicar su imagen de acuerdo con las especificaciones del estándar HTML, la mejor respuesta es utilizar una imagen diferente. Una imagen ampliada a través del proceso de back-end o de Photoshop. Ahora, si desea una imagen adaptable de acuerdo con la pantalla del usuario, ya que lo más probable es que este sea el caso del HTML Standard para lograrlo de la siguiente manera:

<picture>
<source srcset="http://www.placehold.it/320x240" media="(min-width: 600px)">
<source srcset="http://www.placehold.it/640x480" media="(min-width: 900px)">
<img src="http://www.placehold.it/160x120">
</picture>

Answer 7

Hay al menos 4 formas de hacer esto.

1. Establecer directamente el atributo de width de img

Principio: modificar el ancho de la imagen.

establecer width: 640px; display: block width: 640px; display: block para la etiqueta img .

2. envolver img con un div

Principio: heredar el ancho del nodo padre.

1. width: 640px div width: 640px
2. img display: block; width: 100% display: block; width: 100%

3. establece la imagen como fondo de un div

principio: la imagen ya no es una etiqueta img , sino el fondo de un nodo.

1. div background-image: url() , usa la imagen como imagen de fondo.
2. div background-size: {2x width} {2x height} , para cambiar el tamaño de la imagen

4. escala la imagen en 2x

1. establezca la propiedad de transform a scale(2) , lo que significa que quiero que el tamaño de ella 2 veces de su tamaño original

consejos: también, debemos establecer la propiedad transform-origin en la top left , para que pueda comenzar desde la posición (relativamente) top: 0; left: 0; top: 0; left: 0;

Ejecutar el fragmento y echar un vistazo :)

.method-1 {
display: block;
width: 640px;
}
.method-2 {
width: 640px;
}
.method-2 img {
display: block;
width: 100%;
}
.method-3 {
width: 640px;
height: 480px;
background-image: url(http://www.placehold.it/320x240);
background-size: 640px 480px;
}
.method-4 {
transform-origin: top left;
transform: scale(2);
}

<h1>method 1: img displays as block, width 640px</h1>
<img src="http://www.placehold.it/320x240" class="method-1" />
<br/>
<h1>method 2: parent dom width 640px, img width 100%.</h1>
<div class="method-2">
<img src="http://www.placehold.it/320x240" />
</div>
<br/>
<h1>method 3: the img as div''s background, use the background-size attribute to set 2x size.</h1>
<div class="method-3"></div>
<br/>
<h1>method 4: use CSS3 transform property to scale the image into 2x.</h1>
<p>tips: when we set `transform: scale(2);`, we also need to define the `transform-origin` property to `top left`, in order that the image will align from top to bottom as well as from left to right, or it will lost itself. LOL.</p>
<img src="http://www.placehold.it/320x240" class="method-4" />

Answer 8

La forma más óptima es cargar la imagen más grande en su sitio y reducir su escala a donde la necesite a través de CSS .

1) La mejor calidad para su imagen, ya que la ampliación distorsiona la imagen.

2) No es necesario cargar más imágenes con diferentes tamaños.

3) La reducción de escala no arruina la imagen y es solo algunas líneas de CSS

Si no desea cargar la imagen más grande, la segunda mejor solución y la más rápida es ampliarla a través de CSS. El atributo de ancho ya no funciona en <img>

Answer 9

Me gustan la mayoría de las soluciones anteriores, pero el problema aquí es que en realidad no sabemos el tamaño de imagen actual para duplicarlo.

Por lo tanto, mi solución es algo dinámica y no afectará a otras imágenes en su sitio web también. Además, se puede mejorar para triple sus tamaños, y más si lo desea.

Compruebe una vista previa en vivo aquí .

O léelo a continuación:

HTML

<img class="resize-double" src="https://placeimg.com/100/50/nature">
<img src="https://placeimg.com/200/100/nature">

JavaScript

// Select all images to be resized
const toResizeImgs = document.querySelectorAll(".resize-double");
// Loop over those images and double their size
for(let i=0; i < toResizeImgs.length; i++) {
toResizeImgs[i].style.width = toResizeImgs[i].offsetWidth * 2 + "px";
toResizeImgs[i].style.height = toResizeImgs[i].offsetHeight + "px";
}

Seleccionaría las imágenes con la clase resize-double , formaría un bucle sobre ellas y cambiaría su ancho / alto a 2x del actual.

NOTA: Tanto offsetWidth como offsetHeight devuelven el ancho / alto actual, incluidos los márgenes, los rellenos y los bordes. Si no le conviene, puede usar clientWidth y clientHeight , o incluso scrollWidth y scrollHeight según sus necesidades.

Answer 10

Primero creé un div con una clase llamada divWrapper con un tamaño específico. Luego creamos una clase para nuestra imagen con un ancho del 100% (que se extiende a lo largo del divWapper), y agregamos una altura de auto (Para mantener automáticamente la altura en la proporción adecuada). Puede ajustar el tamaño de la imagen de acuerdo con la clase divWapper.

.divWrapper{
width:640px;
height:480px;
float:left;
}
//Now set you image class to
.imageclass{
width:100%
height:auto;
float:left;
}

<div class="divWrapper">
<image class="imageclass" src="https://upload.wikimedia.org/wikipedia/commons/2/2d/Picea_glauca_taiga.jpg">
<div>

Esto mantendrá la imagen en proporción sin importar el tamaño del contenedor de envoltura.

Una nota útil:

Debe tener una imagen de alta calidad desde el principio, sugiero usar imágenes vectoriales. Prefiero usar PNG o SVG. Tiene mejor calidad que el jpeg y otros. Aquí hay un par de enlaces que describen un poco sobre las extensiones de imagen.

https://blog.online-convert.com/best-image-file-extensions/

https://www.sitepoint.com/gif-png-jpg-which-one-to-use/

Answer 11

Puede establecer la dimensión del contenedor de imagen principal

.imageContainer {
width: 640px;
height: 480px;
}
img {
width: 100%;
height: 100%
}

<div class="imageContainer">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqdnZQDnZOOyBGXXB23WS87IAxZ85drC-ylgrqWCqYk2aEh3Vo">
</div>

Answer 12

Puede lograr esto de dos maneras como se muestra a continuación.

<img class="xx" src="http://placehold.jp/150x150.png">
.xx {
zoom: 200%;
}
.xx {
transform: scale(2);
}

Answer 13

Puede usar javascript para esta manera, así cambiará el tamaño de la imagen por su doble

Mira esta demo de JsFiddle

<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var img = $("#sky");
// Create dummy image to get real size
$("<img>").attr("src", $(img).attr("src")).load(function(){
var realWidth = this.width;
var realHeight = this.height;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
var newWidth = realWidth * 2;
var newHeight = realHeight * 2;
$("#sky").width(newWidth);
$("#sky").width(newHeight);
alert("new Image Size" + newWidth+"x"+newHeight);
});
});
});
</script>
</head>
<body>
<img src="https://www.cluedin.net/images/providers/.png" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">
<p><button type="button">Get Original Image Size And Double it</button></p>
</body>
</html> 

Answer 14

Puedes hacer uso de la transformada -> escala

img#imagId {
-ms-transform: scale(2); /* IE 9 */
-webkit-transform: scale(2); /* Safari 3-8 */
transform: scale(2);
}

Answer 15

Puedes hacerlo de muchas maneras diferentes. Pero haga lo que haga, primero descargue su imagen del tamaño que quiere que signifique el tamaño doble; de ​​lo contrario, si duplica el tamaño, se pixelará o se verá difuminado.

 image{ transform: scale(2); }

1. Intenta transformar la escala para duplicar tu imagen.

2. Intenta configurar el ancho en la imagen con CSS

3. Pruebe con JavaScript con setAttribute ("ancho", "tamaño")

Answer 16

Puedes usar CSS en su lugar. Los dos métodos que saltan a la mente son usar la transformación de ancho o scale .

Por ejemplo, img { width: 640px; } img { width: 640px; } . Esto mantendrá la relación de aspecto adecuada sin especificar la altura.

img {
width: 640px;
}

<img src="http://www.placehold.it/320x240">

Por ejemplo, img { transform: scale(2) }

img {
transform-origin: top left;
transform: scale(2);
}

<img src="http://www.placehold.it/320x240">

Answer 17

Pues puedes usar css y evitar el estiramiento.

img{ width:640px; background-size: cover; height:auto;}

Esto estirará su imagen por igual con la altura adecuada. También puede intentar establecer la altura a un número específico.

Answer 18

Según mi experiencia, la mejor manera de duplicar el tamaño de cualquier imagen para uso en sitios web es duplicar la imagen en un programa como Photoshop y luego subirla. El tamaño de la imagen, la densidad de píxeles de las pantallas de retina y la gran cantidad de tamaños de pantalla diferentes hacen que trabajar con imágenes sea un poco más avanzado de lo que solía ser, pero nada demasiado difícil.

verifique el siguiente ejemplo:

<picture>
<source
sizes="(width < 32em) contain, (width >=32em) contain 80vw calc(100vh - 10em)"
srcset="full.jpg 2048h 1024w, half.jpg 1024h, quarter.jpg 512h, eighth.jpg 256h" />
<img src="eighth.jpg" alt="rose flower!" />
</picture>

Sube una imagen relativamente grande, al menos FHD, o más grande, y luego con los ''tamaños'' y ''srcset'' lo configura, cuál cargará dependiendo del tamaño / tipo de pantalla. De esta manera, cubre cualquier resolución potencial, pequeña o grande, y siempre muestra la mejor versión de su imagen. Ok, lo admito, hay trabajo de trabajo manual que sucederá en cada imagen antes de la carga, ¡pero el resultado final vale la pena!

Ahora, si insiste en mantener el mismo archivo de imagen pequeño y duplicarlo mediante el uso de codificación, entonces la mejor manera es agregar una clase CSS a su imagen, y en esa clase especifique sus dimensiones duplicadas, y eso es todo.

Aquí hay una explicación divertida y buena sobre las imágenes, los tamaños y la importancia de por qué necesitamos hacerlo de esta manera. Un artículo divertido en srcset

Answer 19

Utilizo el siguiente código Java Script para escalar la imagen según lo que pueda caber en el contenedor. Usted puede hacer algunos cambios por su necesidad.

function scaleImage(container, image) {
var c = document.getElementById(container);
var i = document.getElementById(image);
var newSize = scaleSize(c.clientWidth, c.clientHeight, i.width, i.height);
i.style.width = newSize.width;
i.style.height = newSize.height;
c.style.backgroundColor = "transparent";
c.style.border = "none";
var intHeight = ((100-((parseFloat(i.style.height)/87)*100))/2);
var strHeightPercentage = intHeight.toString().concat("%");
c.style.top = strHeightPercentage;}

función scaleSize (maxW, maxH, currW, currH) {var ratio = currH / currW;

if (currW >= maxW && ratio <= 1) {
currW = maxW;
currH = currW * ratio;
}
else if (currH >= maxH) {
currH = maxH;
currW = currH / ratio;
}
return { width: currW, height: currH };

}