Блог

Главная - Вопросы по программированию - Высота и ширина изображения, когда изображение не найдено

Высота и ширина изображения, когда изображение не найдено

#php #html #css

#php #HTML #css

Вопрос:

У меня есть следующий код: 

 <div>
  <img src="../images/curry.jpg" height="242" width="300" 
       alt="Can't find image (http://localhost/images/curry.jpg)">
</div>

Я пытаюсь точно расположить страницу так, чтобы, даже если изображение не найдено, я хотел бы, чтобы текст Alt занимал заданную высоту и ширину.

1) так ли теперь работает HTML / CSS?

2) если нет, то поскольку я генерирую HTML из PHP, могу ли я что-нибудь сделать для достижения того, чего я хочу? Например, сработает ли это, если я проверю несуществование и вместо изображения сгенерирую набор полей нужного размера, содержащий мой альтернативный текст?

Ответ №1:

Ответ на ваш первый вопрос — да. Атрибут Alt предназначен для целей SEO и ведет себя так, как вы его видели.

Это возможно, хотя я должен предупредить вас о дополнительных накладных расходах, существует функция file_exists() для проверки, существует ли изображение.

Если эта функция возвращает false вместо эхо-отображения изображения, просто повторите « <p>Can't find image (http://localhost/images/curry.jpg)</p> » и добавьте атрибут стиля в обтекающий div, который указывает желаемую ширину и высоту 

 <div style='height: 242px;width: 300px'>

Комментарии:

1. Как бы то ни было, вы можете легко придать своему стилю <img> быть display:block или display:inline-block и применить к нему ширину и высоту. Просто по умолчанию отображается inline , поэтому ширина / высота игнорируются, когда он возвращается к тому, чтобы быть не заменяемым элементом.

Ответ №2:

Если вы создаете страницу с помощью PHP, вы можете просто исправить ширину / высоту div.

Что касается «альтернативного текста», не могли бы вы показать небольшой скриншот того, что вы хотите? Я не совсем понимаю, что вы имеете в виду, занимая заданный размер.

Комментарии:

1. 1 за ответ. Спасибо. Я имею в виду, что я хотел альтернативный текст «Не удается найти изображение ( localhost/images/curry.jpg )», чтобы занимать площадь 242 X 300 пикселей.

Ответ №3:

Что происходит, когда браузер не может найти изображение, зависит от браузера. Просто взгляните на это в нескольких браузерах и посмотрите, что произойдет:

http://jsfiddle.net/nhHyC/

Safari использует указанные размеры, но отображает значок «поврежденное изображение» в этом пространстве.

Firefox 4 использует alt текст, но игнорирует размеры.

Opera и Chrome используют указанные размеры и отображают alt текст в этом пространстве.

Я не стал проверять IE, потому что эти машины спрятаны в шкафу моих тестовых лабораторий 🙂

Если вам нужно определенное поведение, вам придется сделать это самостоятельно с помощью обертки <div> с display:inline-block желаемыми размерами. Упорядочить соответствующий контент будет сложнее, если вы хотите охватить все браузеры.

alt Атрибут предназначен для пользовательских агентов, которые не могут отображать изображения (например, программы чтения с экрана и устройства, использующие только текст):

Для пользовательских агентов, которые не могут отображать изображения, формы или апплеты, этот атрибут указывает альтернативный текст.

Комментарии:

1. Как бы то ни было, поведение Firefox также зависит от режима quirks vs standards и нескольких других факторов…

2. @Boris: Я был немного удивлен, что Firefox не ведет себя более разумно; OTOH, я проверял вещи с помощью jsfiddle. net таким образом, у меня не было полного контроля над типами документов. Я бы назвал поведение Opera и Chrome наиболее разумным, но реальность имеет мало общего со смыслом.

3. О, Firefox ведет себя совершенно разумно. В стандартном режиме, если изображение не может быть загружено, оно обрабатывается точно так же, как a <span> с текстом alt внутри. Тогда макет просто зависит от стилей, которые к нему применяются; это дает автору страницы полный контроль над тем, что именно они хотят, чтобы произошло. Если ваш <img> есть display:inline , то, конечно, он будет игнорировать ширину / высоту. Если это display:inline-block , то он будет использовать заданный размер. Какой из них вы хотите, полностью зависит от вас; есть варианты использования для обоих.

4. @Boris: У вас есть официальная ссылка на display значение по умолчанию для <img> ? Я думал, что это было inline-block , а не inline но я ошибался раньше, и я был бы рад, если бы меня исправили, если я ошибаюсь на этот раз.

5. w3.org/TR/CSS21/visuren.html#display-prop говорит Initial: inline . Таким образом, все отображается inline , если какая-либо таблица стилей (автор, пользователь или user-agent) не оформлена иначе. Таблицы стилей по умолчанию для типичных пользовательских интерфейсов не изменяют отображаемое значение <img> . На самом деле вы можете проверить это в любом браузере, просто создав страницу с <img> на ней и посмотрев, что getComputedStyle возвращает для display .