Адаптивное решение для изображений под div

Автор：Eve Cole Время обновления：2025-01-17 10:12:01

Мы (особенно такие новички, как я) часто сталкиваемся с проблемой – адаптацией картинки. Эта проблема очень распространена. В области статей и на форумах можно сказать, что везде, где необходимо загрузить изображения, эта проблема существует, и люди время от времени спрашивают об этом на форумах. Почему? Причина проста: мы не можем требовать от веб-редакторов или участников вашего форума умения обрезать изображения или понимать самый простой HTML-код, хотя в нем не так много технического содержания.

Предыдущее решение в основном было реализовано с использованием js, но любой, кто его использовал, знает, что этот метод немного громоздкий. Другой способ — определить over-flow:hidden во внешнем контейнере. Но этот метод только обрежет картинку и не будет применен автоматически.

Появлением следующего метода мы должны быть благодарны великому CSS2.0 и еще большему Microsoft (без него не было бы необходимости в таком многословном коде ^_^). Я прошел тест только на ie6.0, ff1.5, Opera7.0 под WinXP. Я надеюсь использовать эту статью, чтобы вдохновить других, и надеюсь, что больше экспертов смогут дать рекомендации. Ключ: max-width:780px и строка ниже;

Исправлена адаптация пикселей:

Окно запуска кода

<!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=gb2312; /> <title>css2.0 VS ie</title> <style type=text/css>  </style> </head> <body> <div id=pic> <img src=http ://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=Спасибо blueidea за фотографии, на которые есть ссылки! /> </div> </body> </html>

[Ctrl+A. Советы по выбору всех: сначала можно изменить часть кода, а затем нажать «Выполнить»]

Процентная адаптация:

Окно запуска кода

<!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=gb2312; /> <title>css2.0 VS ie</title> <style type=text/css>  </style> </head> <body > <div id=pic> <img src=http://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=Спасибо blueidea за изображение, связанное с горячей ссылкой! /> </div> </body> </html>

[Ctrl+A: Советы по выбору всех: сначала вы можете изменить часть кода, а затем нажать «Выполнить»]

напоминать:

1 Этот метод предназначен не только для img;

2 максимальная ширина, максимальная высота, минимальная ширина, минимальная высота.

Введение в использование выражений в CSS

Автор: dozb

определение

IE5 и более поздние версии поддерживают использование выражений в CSS для связывания свойств CSS с выражениями Javascript. Свойства CSS здесь могут быть внутренними свойствами элемента или пользовательскими свойствами. То есть за атрибутом CSS может следовать выражение Javascript, а значение атрибута CSS равно результату вычисления выражения Javascript. Вы можете напрямую ссылаться на свойства и методы самого элемента в выражении или использовать другие объекты браузера. Выражение выглядит так, как будто оно находится внутри функции-члена этого элемента.

Присвойте значения внутренним атрибутам элементов

Например, вы можете расположить элемент в зависимости от размера браузера.

#myDiv {

позиция: абсолютная;

ширина: 100 пикселей;

высота: 100 пикселей;

слева: выражение(document.body.offsetWidth - 110 + px);

вверху: выражение(document.body.offsetHeight - 110 + px);

фон: красный;

}

Присвоение значений пользовательским атрибутам элемента

Например, уберите пунктирные рамки для ссылок на странице.

Обычный подход:

<a href=link1.htm onfocus=this.blur()>ссылка1</a>

На первый взгляд преимущества использования выражений могут быть неочевидны, но если на вашей странице десятки или даже сотни ссылок, будете ли вы по-прежнему использовать механически Ctrl+C и Ctrl+V, не говоря уже о том и другом. Для сравнения, какой из них? генерирует более избыточный код?

Способ использования выражения следующий:

<тип стиля=текст/css>

a {звездочка: выражение(onfocus=this.blur)}

</стиль>

<a href=link1.htm>ссылка1</a>

<a href=link2.htm>ссылка2</a>

<a href=link3.htm>ссылка3</a>

проиллюстрировать:

Звездочка внутри — это атрибут, определенный вами. Вы можете определить его по своему усмотрению. Тогда оператор, содержащийся в выражение(), является JS-скриптом. Не забудьте поставить кавычку между пользовательским атрибутом и выражением, потому что по сути. Это по-прежнему CSS, поэтому он помещается в тег стиля, а не в скрипт. Итак, пунктирную ссылку на странице можно легко убрать одним предложением. Но не успокаивайтесь, если сработавший специальный эффект представляет собой изменение атрибута CSS, результат будет отличаться от вашего первоначального намерения. Например, если вы хотите изменить цвет текстового поля на странице при перемещении мыши внутрь и наружу, вы, естественно, можете подумать, что это следует записать как

/* Исходный текст искажен, времени исправлять нет, извините!*/

Но в результате получается ошибка скрипта. Правильный способ написать это — записать в функцию определение стиля CSS, как показано ниже:

<тип стиля=текст/css>

ввод {звезда: выражение (onmouseover=функция()

{this.style.backgroundColor=#FF0000},

onmouseout=function(){this.style.backgroundColor=#FFFFFF}) }

</стиль>

<тип ввода=текст>

Уведомление:

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