Как добавить границу к изображению в HTML?

Как добавить границу к изображению с помощью HTML?

Ответ 1

Вот некоторые HTML и CSS-коды, которые помогут решить вашу проблему:

CSS

.ImageBorder
{
    border-width: 1px;
    border-color: Black;
}

HTML

<img src="MyImage.gif" class="ImageBorder" />

Ответ 2

Два способа:

<img src="..." border="1" />

или

<img style='border:1px solid #000000' src="..." />

Ответ 3

Вы также можете добавить дополнение для приятного эффекта.

<img src="image.png" style="padding:1px;border:thin solid black;">

Ответ 4

Я также предпочитаю CSS над HTML; HTML - это содержание, CSS о презентации.

С CSS у вас есть три варианта.

Встроенный CSS (например, в решениях Trevor и Diodeus). Трудно поддерживать и не гарантирует согласованности: вам нужно будет убедиться, что каждое изображение имеет одинаковую ширину границы и цвет границы.
Внутренняя таблица стилей. Решает проблему согласованности для всех изображений на странице с class= "hasBorder" , но вам нужно будет включить таблицу стилей для каждой страницы, и снова убедитесь, что значение "hasBorder" определяется одинаково каждый раз.
Внешняя таблица стилей. Если вы включаете ссылку на внешний файл CSS на каждой странице, все изображения с class= "hasBorder" на всех страницах будут иметь одинаковую границу.

Пример использования внутренней таблицы стилей:

<!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>

Если вам нужна внешняя таблица стилей, замените стиль <style> ... </style> блок с

<link rel="stylesheet" type="text/css" href="somestylesheet.css" />

Ответ 5

border="1" Включить тег IMAGE или использовать css border:1px solid #000;

Ответ 6

CSS

img{border:2px solid black;}

Ответ 7

Джек

Вы можете много узнать о границах и как их использовать в http://www.w3schools.com/css/css_border.asp. Это, как говорится, есть несколько разных способов, которыми вы могли бы это сделать.

Ниже, как я обычно это делаю, но, читая документацию по w3schools, вы можете найти свой собственный желаемый метод.

.addBorder {
  /* Thickness, Style, and Color */
  border: 1px solid #000000;
}

<img src="mypicture.jpg" alt="My Picture" class="addBorder" />

Edit:

Я заметил, что исходным вопросом было не "Как добавить границу к изображению", но вместо этого было "как добавить в поле вокруг изображения с помощью html?". Вопрос был переписан другими, поэтому я не уверен на 100%, что вам нужна рамка на вашем изображении.

Если вам просто нужна рамка вокруг ваших изображений, вы можете использовать DIV со своими собственными стилями:

.imageBox {
  background-color:#f1f1f1;
  padding:10px;
  border:1px solid #000000;
}

<div class="imageBox">
  <img src="picture.jpg" alt="My Picture" />
</div>

Ответ 8

Правильный способ зависит от того, хотите ли вы, чтобы только определенный образ в вашем контенте имел границу, или в вашем коде есть шаблон, где определенные изображения должны иметь границу. В первом случае перейдите со атрибутом style на элемент img, иначе укажите его значащее имя класса и определите эту границу в таблице стилей.

Ответ 9

Ответы выше очень хорошие, я уверен. Но для ума, как и я, я рекомендую Snagit 10. Вы можете придать изображению границу любой ширины, стиля и цвета, прежде чем вставлять ее на свою веб-страницу. Они выполняют полную рабочую программу по 30-дневной пробной версии.

Ответ 10

как сказано выше, простая строка кода исправит ваши проблемы.

border: 1px solid #000;

Существует еще одна возможность добавить границу к вашему изображению, и с помощью Photoshop можно увидеть, как это делается с помощью этого урока ниже: http://bannercheapdesign.com/articles-and-tutorials/learn-how-to-add-border-to-your-banner-design-using-photoshop/