tamaño - insertar imagen html url
¿Cómo agrego un borde a una imagen en HTML? (10)
¿Cómo puedo agregar un borde a una imagen usando HTML?
Dos caminos:
<img src="..." border="1" />
o
<img style=''border:1px solid #000000'' src="..." />
Jack,
Puede aprender mucho sobre las fronteras y cómo usarlas en http://www.w3schools.com/css/css_border.asp . Dicho esto, hay un par de maneras diferentes en que puede lograr esto.
A continuación se muestra cómo generalmente lo hago, pero leyendo la documentación en w3schools puede encontrar su propio método deseado.
.addBorder {
/* Thickness, Style, and Color */
border: 1px solid #000000;
}
<img src="mypicture.jpg" alt="My Picture" class="addBorder" />
Editar:
Noté que la pregunta original no era "Cómo agregar un borde a una imagen", sino que era "cómo agregar un cuadro alrededor de una imagen usando html". La pregunta fue reescrita por otros, así que no estoy 100% seguro de que quisieras un borde en tu imagen.
Si solo deseara un recuadro alrededor de sus imágenes, podría usar un DIV, con sus propios estilos:
.imageBox {
background-color:#f1f1f1;
padding:10px;
border:1px solid #000000;
}
<div class="imageBox">
<img src="picture.jpg" alt="My Picture" />
</div>
La forma correcta depende de si solo desea que una imagen específica en su contenido tenga un borde o si hay un patrón en el código donde ciertas imágenes deben tener un borde. En el primer caso, vaya con el atributo de estilo en el elemento img; de lo contrario, asígnele un nombre de clase significativo y defina ese borde en su hoja de estilo.
También prefiero CSS sobre HTML; HTML es sobre contenido, CSS sobre presentación.
Con CSS tienes tres opciones.
- CSS en línea (como en las soluciones de Trevor y Diodeus). Es difícil de mantener y no garantiza la consistencia: tendrá que comprobar que cada imagen tenga el mismo ancho de borde y color de borde.
- Hoja de estilo interna. Resuelve el problema de coherencia para todas las imágenes de la página que tenga class = "hasBorder", pero deberá incluir una hoja de estilo para cada página, y nuevamente asegurarse de que "hasBorder" se defina de la misma manera cada vez.
- Hoja de estilo externa. Si incluye un enlace al archivo CSS externo en cada página, todas las imágenes con class = "hasBorder" en todas las páginas tendrán el mismo borde.
Ejemplo usando la hoja de estilo interna:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image with border</title>
<style type="text/css">
img.hasBorder { border:15px solid #66CC33; }
</style>
</head>
<body>
<img class="hasBorder" src="peggy.jpg" alt="" />
</body>
</html>
Si desea una hoja de estilo externa, reemplace el bloque <style> ... </ style> con
<link rel="stylesheet" type="text/css" href="somestylesheet.css" />
También puede agregar relleno para un efecto agradable.
<img src="image.png" style="padding:1px;border:thin solid black;">
Aquí hay algunos códigos HTML y CSS que resolverían su problema:
CSS
.ImageBorder
{
border-width: 1px;
border-color: Black;
}
HTML
<img src="MyImage.gif" class="ImageBorder" />
Las respuestas anteriores son muy buenas, estoy seguro. Pero para los débiles, como yo, recomiendo Snagit 10. Puedes darle a la imagen un borde en cualquier ancho, estilo y color antes de insertarlo en tu página web. Hacen un programa de trabajo completo en 30 días de prueba.
CSS
img{border:2px solid black;}
border="1" EN LA etiqueta IMAGE o usando el border:1px solid #000; css border:1px solid #000;
como se dijo anteriormente, una simple línea de código solucionará sus problemas
border: 1px solid #000;
Hay otra opción para agregar borde a su imagen y con photoshop puede ver cómo se hace con este tutorial a continuación: http://bannercheapdesign.com/articles-and-tutorials/learn-how-to-add-border-to -your-banner-design-using-photoshop /