Проблем с картинка при Responsive design


0
Здравейте колеги,
Проблемът ми е, че искам да позиционирам една картинка в средата на страницата, но когато го направя с relative или absolute или margin-left се чупи при намаляване на екрана. Img таговете имат стил max-width: 100%. Някаква идея как да оправя проблема?



Отговори



0

А кой е родителския елемент на картинката? Задай на него text-align: center.

А на текста отдолу (предполагам че е параграф) задай text-align:justify

С margin: 0 auto; няма да стане, защото за тази цел трябва да знаеш текущата ширина на картинката, а ти задаваш само max-width


от pdrenovska (2196 точки)


0
Благодаря много!!!

от DGrigorov (678 точки)

0
А някаква идея как да си направя менюто responsive, тъй като го позиционирам с relative (понеже не намирам друг начин) и се чупи (горното меню).

от DGrigorov (678 точки)



0

margin: 0 auto; не става ли ?


от Teodor92 (13062 точки)


0
Когато сложиш position: absolute; маргина като цяло се чупи. Можеш да направиш както каза колегата Теодор или да сложиш left: 50% (тук се позиционира на око така да се каже, може да не е 50% средата, зависи от големината на картинката, но след това като разтягаш и свиваш всичко е ОК )
Cheers!

от CaptCortez (1242 точки)


0

Не става нито с margin-a, нито с left: 50%; Ето сника на проблема и снимка как трябва да изглежда.


от DGrigorov (678 точки)


0
Слагаш го в един див и му задаваш широчина и височина, след това на див-а даваш margin:0 auto;



0
Преди време бях намерил един трик. Примерно:
.image{
width:500px;
height:200px;
top:0;
left:50%;
margin-left: -250px;
}
Дано да ти помага.



0

Значи тук трябва да си играеш само с преубразуване на проценти. Това е част от флуид дизайна, който се ползва и с респонсив техниката. Намираш някой добър калкулатор. Аз ползвам този http://mobaltarnovo.com/smetka/percents.html

Не го рекламирам, не и мой. Отваряш си сайта (на-вероятно ползваш Фотошоп) и почваш снимката ти например е 300 пиксела (трябва да заема толкова), трябва да е центрирана в документ 900 пиксела, снимката ти е с ширина 400.

Абсолютното позициониране няма смисъл:

img{

max-width:400px;

width: 33.33333%; /*300= 1/3*900 */

height:auto;

}

На парента даваш , както  е отговорено преди мен text-align:center или на снимката маргин 0. В случая приемаме, че парента е 900. На боди му задаваш минимална ширина и ако се премине вече действат media queries и съответно други стилове. Това е една от основните практики при дизайн. Друг вариант е всичко фиксирано, но пак с медиа queries. Имай предвид, че текст не може да се ресайзва. Трябва да ползваш Скрипт или да направиш разтоянията между бутоните в проценти, като внимаваш да не се счупи.