Помощник
|
Выравнивание изображения по центру |
smaant
|
Сообщение
#1
|
||
|
|
||
|
|||
ValianT |
12.6.2011, 1:16;
Ответить: ValianT
Сообщение
#2
|
|
Что-то не до конца понятное.
Зачем релатив,зачем абсолют? Нужно чтобы картинка растягивалась под окошко,задавайте ей размер в % Картинка с подписью? Ну оберните в див с флоатом. А остальное зачем? |
|
|
smaant
|
Сообщение
#3
|
|
Да, вы правы, недостаточно точно описал - нужно чтобы картинка + подпись занимали не больше определенного размера экрана (в данном примере 90% высоты), т.к. картинки могут быть разного размера, то задать их высоту просто в процентах не вариант. Если есть вариант сделать это проще - буду рад :)
|
|
|
ValianT |
12.6.2011, 11:22;
Ответить: ValianT
Сообщение
#4
|
|
Те вам нужно обрезать картинку,если она будет занимать место, больше определённого?
В вашем примере она обрезаться не будет. Поместите её в div, на него поставить максимально возможные значения высоты/ширины и overflow:hidden подпись можно получить обернув эту конструкцию в ещё 1 див,для удерживания текста подписи всегда под картинкой |
|
|
smaant
|
Сообщение
#5
|
|
Те вам нужно обрезать картинку,если она будет занимать место, больше определённого? Нет :) ... нужно сделать изображение с подписью, обтекаемые текстом, при этом изображение должно масштабировать в зависимости от размера окна.
В текущем решении устраивает все, кроме того, что не получается расположить изображении по центру.. |
|
|
ValianT |
13.6.2011, 10:29;
Ответить: ValianT
Сообщение
#6
|
|
Ладно,пойдём от противного)
У вас на img стоит абсолют. Ничто вам не мешает его выровнять с помощью отрицательного margin слева например. |
|
|
smaant
|
Сообщение
#7
|
|
А можно работающий пример? Это будет универсальное решение? Т.е. для картинки другого размера не придется вручную подбирать значение margin?
|
|
|
ValianT |
14.6.2011, 12:38;
Ответить: ValianT
Сообщение
#8
|
|
Сразу оговорюсь что не до конца понимаю вашу необходимость в подобных изварщениях,но если вернуться к конкретике-да.
на картинку ставим margin-left:-50% и она всегда будет визуально начинаться слева. |
|
|
smaant
|
Сообщение
#9
|
|
|
|
|
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> |
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Выравнивание картинки по центру между текстом | 10 | NikN | 2637 | 6.1.2021, 23:24 автор: buypushplatform |
|
Выравнивание содержимого footer'a | 0 | press74 | 4998 | 2.7.2019, 18:58 автор: -iiwanc- |
|
Изображения с shutterstock от 15 рублей/штука | 5 | Mr_Big | 3670 | 10.9.2017, 21:30 автор: Palundra |
|
Вывод изображения при наведения на часть картинки по area | 1 | androv77 | 4842 | 16.7.2016, 17:32 автор: -YroKPROG- |
|
Создаю фрактальные изображения для разных целей | 22 | Russ33 | 5074 | 27.6.2016, 21:42 автор: Russ33 |
Текстовая версия | Сейчас: 24.4.2024, 1:17 |