navegadores web una escala automática anchura o altura de la imagen en función de si o no una anchura o altura se fijó en hojas de estilo CSS código (CSS). Cuando se desea cambiar la escala de anchura, por ejemplo, establecer un ancho y el navegador se encargará de hacer coincidir la altura. Ajuste solamente una altura también hace que el navegador para usar un ancho que es proporcional a esa altura. A pesar de que el cambio de tamaño de imagen es mejor dejar a los programas de retoque de imágenes, por razones de tamaño del archivo y el estiramiento o aplastando, puede utilizar este truco para cambiar el tamaño de imágenes en CSS sobre la marcha y mantenerlos en proporción.
Instrucciones
1 Ir a "Inicio" en la barra de tareas y entrar en "Bloc de notas" o el nombre de un editor de código en la barra de búsqueda. Pulse la tecla "Enter" para iniciar el programa. Vaya a "Archivo" y abra el archivo que contiene el código de su página web, lo que es más probable un archivo HTML.
2 Busque la sección "<link>" etiquetas en la parte superior del código para el archivo y busque en los contenidos de su "href" atributos de cualquier archivo CSS. Cuando encuentre el nombre de un archivo CSS, volver a "Archivo" en la barra de herramientas y abrir ese archivo. Ahora debe tener dos archivos abiertos: uno para su página Web y otro para el CSS. Si no tiene un archivo CSS, crear una y añadir el "<link>" etiqueta con el código de la página Web entre los "<head>" etiquetas:
<Rel = "stylesheet" href = "ruta / a / style.css" enlace type = "text / css" />
3 Recibe el nombre de identificación para su imagen no simplemente viendo la etiqueta "<img>" en el código de la página Web:
<Img alt = "Una imagen" id = "myimage" />
En el código anterior, "myimage" es el nombre de identificación. Añadir un nombre de identificación para la etiqueta "<img>" si uno no existe ya.
4 Ir a la parte inferior de su archivo CSS y escribir un selector para "seleccionar" la imagen por su nombre ID:
Mi imagen {}
Propiedad pares de valor van dentro de las llaves. Ahí es donde va a colocar código para cambiar el tamaño de la imagen.
5 Añadir o bien una altura o una anchura de su código CSS:
myimage {width: 300px; } Myimage {height: 200px; }
El anterior es un ejemplo de cada tipo de ajuste. Al configurar un ancho sin una altura, el navegador calculará automáticamente la altura a escala. Lo opuesto también es cierto.
Consejos y advertencias
- Utilice el siguiente código (cotizaciones menos) para hacer que Internet Explorer use un mejor método de cambio de tamaño: "img {-ms-interpolación-mode: bicúbica;}".
- el cambio de tamaño de imagen realizado en un editor de gráficos sigue siendo preferible hacerlo en CSS, especialmente cuando se escala por una imagen de gran tamaño. En el caso de una imagen de gran tamaño, aún se requerirá el mismo tiempo en cargar, incluso cuando reducido.