X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

4 страниц V   1 2 3 4 >
Открыть тему
Тема закрыта
> Выравнивание изображения по центру
smaant
smaant
Topic Starter сообщение 11.6.2011, 20:02; Ответить: smaant
Сообщение #1


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

Как это можно исправить?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>

<style type="text/css">
#outerTD {
border: 2px dotted blue;
text-align: center;
height: 100%;
}

#outerDIV {
border: 2px solid red;
position: relative;
height: 100%
}

img {
height: 100%;
position: absolute;
}
</style>
</head>

<body style="text-align: justify;" height="100%">

<table style="float:left;text-align:center;margin:10px;width:300px;height:90%">
<tr>
<td id="outerTD">

<div id="outerDIV">

<img src='http://iphonewallpapersx.com/wp-content/uploads/2010/07/iphone_3g_black.jpg' />

</div>

</td></tr>
<tr>
<td style="border:2px dotted green">
<small>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus.</small>
</td>
</tr>
</table>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris laoreet sem nec justo fringilla quis congue massa tincidunt. Sed quis ligula nunc. Nullam fermentum odio at lacus malesuada non tincidunt libero lobortis. Curabitur sagittis fringilla ligula, eu volutpat felis dignissim eu. Aenean tempor tortor non lacus iaculis interdum. Donec posuere ullamcorper vestibulum. Aenean sed tortor lorem. Nam sed lectus sit amet lacus lacinia mollis in nec sem. Sed nulla leo, consectetur in volutpat ut, vulputate eu nibh. Pellentesque volutpat, mauris sit amet scelerisque mollis, purus velit volutpat massa, non ultricies arcu sapien vel urna.</p>

<p>Morbi et quam ante. In vel orci eget ipsum lacinia ultricies. Aenean nec ornare eros. Morbi lobortis euismod dolor, a rutrum lorem blandit ut. Aliquam erat volutpat. Nam accumsan tortor dictum turpis bibendum eu blandit odio pulvinar. Phasellus nisi leo, ultricies a gravida nec, scelerisque ut ligula. Sed a metus dolor, eu consectetur elit. Maecenas ornare pretium suscipit. In nibh sem, malesuada in rhoncus nec, condimentum fermentum nunc. Duis non nulla at enim convallis tincidunt. Vivamus ullamcorper iaculis eleifend. Pellentesque eros odio, tincidunt ac molestie ut, egestas interdum nisl. Etiam vel ante nec odio scelerisque suscipit. Nulla id ullamcorper dui. Duis dignissim convallis ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ac eros lorem, in fermentum tellus.</p>

<p>Proin adipiscing, erat eget porttitor blandit, nulla lectus lobortis felis, ac cursus turpis est at lacus. Aliquam congue ante vitae diam egestas luctus. Phasellus nulla magna, sollicitudin non pulvinar sed, elementum nec libero. Vivamus viverra vehicula tellus sit amet interdum. Donec non urna a sapien aliquam ultrices eget pretium velit. Fusce pellentesque condimentum semper. Integer laoreet accumsan urna placerat lacinia. Quisque blandit felis luctus neque aliquet suscipit. Mauris nec risus sit amet magna pulvinar iaculis. Aliquam in turpis massa. Mauris molestie euismod nisl id interdum.</p>

<p>In dignissim magna et massa facilisis sit amet varius risus posuere. Donec dapibus, dui non aliquam viverra, dui justo dignissim elit, ut viverra nisl magna a tortor. Morbi mattis, tellus et venenatis iaculis, erat libero commodo nunc, ac lacinia erat dui in nisi. Duis eget massa nec metus hendrerit dictum sed a nibh. Ut vitae sapien vitae nulla gravida lobortis quis non dolor. Pellentesque auctor feugiat vehicula. Nam sed risus porta sem semper imperdiet sed rutrum turpis. Donec dolor urna, laoreet sed iaculis vel, convallis at nulla. Sed tincidunt luctus neque sit amet consectetur. Donec et nulla purus. </p>
</body>

</html>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ValianT
ValianT
сообщение 12.6.2011, 1:16; Ответить: ValianT
Сообщение #2


Что-то не до конца понятное.
Зачем релатив,зачем абсолют?
Нужно чтобы картинка растягивалась под окошко,задавайте ей размер в %
Картинка с подписью? Ну оберните в див с флоатом.
А остальное зачем?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
smaant
smaant
Topic Starter сообщение 12.6.2011, 1:27; Ответить: smaant
Сообщение #3


Да, вы правы, недостаточно точно описал - нужно чтобы картинка + подпись занимали не больше определенного размера экрана (в данном примере 90% высоты), т.к. картинки могут быть разного размера, то задать их высоту просто в процентах не вариант. Если есть вариант сделать это проще - буду рад :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ValianT
ValianT
сообщение 12.6.2011, 11:22; Ответить: ValianT
Сообщение #4


Те вам нужно обрезать картинку,если она будет занимать место, больше определённого?
В вашем примере она обрезаться не будет.
Поместите её в div, на него поставить максимально возможные значения высоты/ширины и overflow:hidden
подпись можно получить обернув эту конструкцию в ещё 1 див,для удерживания текста подписи всегда под картинкой
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
smaant
smaant
Topic Starter сообщение 12.6.2011, 11:53; Ответить: smaant
Сообщение #5


(ValianT @ 12.6.2011, 14:22) *
Те вам нужно обрезать картинку,если она будет занимать место, больше определённого?

Нет :)

(smaant @ 11.6.2011, 23:02) *
... нужно сделать изображение с подписью, обтекаемые текстом, при этом изображение должно масштабировать в зависимости от размера окна.
В текущем решении устраивает все, кроме того, что не получается расположить изображении по центру..
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ValianT
ValianT
сообщение 13.6.2011, 10:29; Ответить: ValianT
Сообщение #6


Ладно,пойдём от противного)
У вас на img стоит абсолют. Ничто вам не мешает его выровнять с помощью отрицательного margin слева например.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
smaant
smaant
Topic Starter сообщение 13.6.2011, 22:56; Ответить: smaant
Сообщение #7


А можно работающий пример? Это будет универсальное решение? Т.е. для картинки другого размера не придется вручную подбирать значение margin?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ValianT
ValianT
сообщение 14.6.2011, 12:38; Ответить: ValianT
Сообщение #8


Сразу оговорюсь что не до конца понимаю вашу необходимость в подобных изварщениях,но если вернуться к конкретике-да.
на картинку ставим margin-left:-50% и она всегда будет визуально начинаться слева.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
smaant
smaant
Topic Starter сообщение 17.6.2011, 0:03; Ответить: smaant
Сообщение #9


ValianT, простите, но я не знаю как еще объяснить..
(smaant @ 11.6.2011, 23:02) *
В текущем решении устраивает все, кроме того, что не получается расположить изображении по центру..


Коллеги, есть еще идеи как решить подобную задачу?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
vasvas7775
vasvas7775
сообщение 17.6.2011, 12:38; Ответить: vasvas7775
Сообщение #10


Если я правильно понял, можно попробовать так:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body { margin:0px auto;}
#block { width:800px; height:500px; background:red; margin-left:auto; margin-right:auto; margin-top:10px; padding:5px;}
#block1 { width:300px; height:300px; background:#33CC00; border:solid 1px; margin-right:5px; float:left;}
img { width:100%; height:100%;}
</style>
</head>

<body>

<div id="block">
<div id="block1"><img src="C:/Documents and Settings/All Users/Документы/Мои рисунки/Образцы рисунков/Зима.jpg"/></div>
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст
</div>

</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
4 страниц V   1 2 3 4 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Изображения не загружаются полностью в Google Chrome
14 maxmer 805 3.4.2022, 13:14
автор: LigaGiga
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВыравнивание картинки по центру между текстом
10 NikN 2042 6.1.2021, 23:24
автор: buypushplatform
Открытая тема (нет новых ответов) Выравнивание содержимого footer'a
0 press74 3303 2.7.2019, 18:58
автор: -iiwanc-
Открытая тема (нет новых ответов) Изображения с shutterstock от 15 рублей/штука
5 Mr_Big 3068 10.9.2017, 21:30
автор: Palundra
Открытая тема (нет новых ответов) Вывод изображения при наведения на часть картинки по area
1 androv77 4439 16.7.2016, 17:32
автор: -YroKPROG-


 



RSS Текстовая версия Сейчас: 21.5.2022, 13:51
Дизайн