Opera и размер в % для картинок.

Dr0n · October 28, 2007

Воспользовавшись посиском нашел следующее:

1. Задвать ширину картинки в процентах.

2. Использовать фоновый рисунок, он в случае "невлезания" будет обрезан.

3. Применять скрипты, которые станут проверять ширину окна и менять изображения или их ширину.

4. Сверстать макет под ширину 800 (1000) пикселов и не мучиться с браузером.

5. Повесить предупреждение на страницу: если у тебя монитор 15" и разрешение 800х600 - ты дурак и пошел прочь с моего сайта.

Меня интересует пункт "1". Но, в Opere если ставишь размер картинки в %, она не отображается. Вычитал что для контейнера в котором висит картинка надо ставить "overflow", попробовал ничего не вышло.

зы Вообще былобы, удобно если бы были разделы в форуме, к примеру:

"Косяки ИЕ и способы борьбы"

"Исправляем косяки ОПЕРЫ"

и т.д., думаю тогда былобы легче ореинтироваться на форуме

Vlad · October 28, 2007

Что за ерунда, Опера прекрасно отображает изображения, ширина которых задана в процентах. Видимо в другом чем-то ошибка.

Косяков у IE слишком много и писать про них уже никому не хочется.

Dr0n · October 28, 2007

Ну незнаю ерунда или нет вот код:

<!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>Untitled Document</title>
<style type="text/css">
<!--
.test {
}
-->
</style>
</head>

<body>
<div class="test"><img src="body_top1.gif" width="100%" height="100%" /></div>
</body>
</html>

вот скрин:

klierik · October 29, 2007

так а собственно в чем проблема?

как и следовало ожидать, рисунок растянулся на 100% по ширине

и на 100% (согласно высоте родительского элемента)

попробуйте такой код:

<!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>Untitled Document</title>
<style type="text/css">

html, body { height:100%; padding0; margin:0}
div.test {height:100%; margin:0; padding:0}

</style>
</head>

<body>
<div class="test"><img src="body_top1.gif" width="100%" height="100%" /></div>
</body>
</html>

Dr0n · October 30, 2007

Данный код работает, но если мы убираем:

html, body { height:100%; padding0; margin:0}

а оставляем только для слоя контейнера, то сново никакого результата. Так и должно быть? т.е. обязательно для html, body -задавать высоту?

klierik · October 30, 2007

ну если без этого не работает, то значит оно надо

Vlad · October 31, 2007

padding: 0 - забыл двоеточие поставить.

Учитывай высоту родительского элемента всегда. По умолчанию высота и ширина блока задана как auto. Это значит, что по ширине блок занимает все свободное пространство, а по высоте соответствует содержимому.

Sign In

Opera и размер в % для картинок.

Question

Dr0n

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

Dr0n

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Dr0n

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information