Вопросы Теги

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

Это старый поток, но я добавлю некоторую информацию для других людей.

У меня возникла аналогичная проблема с программой, которая пишет файлы PDF, иногда они занимают 30 секунд для рендеринга. тот же период, в течение которого мой класс watcher_FileCreated ждет перед копированием файла.

Файлы не были заблокированы.

В этом случае я проверил размер PDF-файла, а затем ждал 2 секунды перед сравнением новый размер, если они были неравными, нить будет спать в течение 30 секунд и повторить попытку.

29
задан SilentGhost 24 February 2009 в 18:53
поделиться

10 ответов

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

<img src="image.png" style="padding:1px;border:thin solid black;">
17
ответ дан Trevor Bramble 24 February 2009 в 18:53
поделиться

Джек,

Вы можете многое узнать о границах и о том, как их использовать, по адресу 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" />

Редактировать:

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

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

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

<div class="imageBox">
  <img src="picture.jpg" alt="My Picture" />
</div>
2
ответ дан Sampson 24 February 2009 в 18:53
поделиться

CSS 

img{border:2px solid black;}
5
ответ дан Subin 24 February 2009 в 18:53
поделиться

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

CSS 

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

HTML 

<img src="MyImage.gif" class="ImageBorder" />
45
ответ дан 2 revs 24 February 2009 в 18:53
поделиться

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

border: 1px solid #000;

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

0
ответ дан chopper 24 February 2009 в 18:53
поделиться

border="1" ON IMAGE tag или использование css border:1px solid #000;

6
ответ дан Ruchit Rami 24 February 2009 в 18:53
поделиться

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

-1
ответ дан Pete Shotton 24 February 2009 в 18:53
поделиться

Два способа: 

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

или 

<img style='border:1px solid #000000' src="..." />
40
ответ дан Diodeus - James MacFarlane 24 February 2009 в 18:53
поделиться

Я также предпочитаю CSS, а не HTML; HTML о содержании, CSS о представлении.

С помощью CSS у вас есть три варианта.

  1. Встроенный CSS (как в решениях Тревора и Диодея). Сложно поддерживать, и не гарантирует согласованности: вам придется проверить себя, что у каждого изображения одинаковая ширина и цвет границы.
  2. Внутренняя таблица стилей. Решает проблему согласованности для всех изображений на странице, имеющих class = "hasBorder", но вам нужно будет включить таблицу стилей для каждой страницы и снова убедиться, что "hasBorder" каждый раз определяется одинаково.
  3. Внешняя таблица стилей. Если вы включите ссылку на внешний 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" />
9
ответ дан stevenvh 24 February 2009 в 18:53
поделиться

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

0
ответ дан Сыч 24 February 2009 в 18:53
поделиться