1

Тема: Виручайте мені потрібно адаптувати текс на картинці

Всім привіт мені потрібно адаптувати текст на картинці, таким образом, щоб коли розширення екрану змінювалос змінювалося росположення тексту

Примерно це виглядає так

<div>
<div class="size"> 2000 </div>
<img scr="">
</div

<style>
.size{
left: 100px;
top: 50px;
}
</style

Але я хочу щоб картинка і сам текс не міняли росположеніє коли різні види екрану!

2

Re: Виручайте мені потрібно адаптувати текс на картинці

gameoniu886 написав:

потрібно адаптувати текст на картинці таким образомчином, щоб коли розширенняроздільність екрануа змінювалосася, змінювалося росположеннярозташування тексту

gameoniu886 написав:

щоб картинка і сам текст не міняли росположенієрозташування коли різні види екрануа!

Ви спершу визначтеся, чи вам треба, щоб змінювалося, чи щоб не міняли. Бо одночасно не буває. Коли визначитеся і все ще не знатимете, як, питайте, але спробуйте докласти трохи більше зусиль у питання. Бо якщо вам дійсно не дається орфографія на рівні 6 класу, то HTML вам ще зарано вчити.

3

Re: Виручайте мені потрібно адаптувати текс на картинці

Мені потрібно щоб при зменшенні екрану зменшувався текст разом із фотографією. У тих місцях, у яких вони тепер перебувають

4

Re: Виручайте мені потрібно адаптувати текс на картинці

Наприклад це фото із розмірами. Де потрібно прописати скільки і яка сторона. І коли я зменшую розмір екрану в мене текст в одній стороні, а фотографія уже в іншій. А я хочу адаптувати так, щоб це все працювало корректно. Щоб розміри оставались там де були задані із самого початку!

https://wave.glass/upload-files/calc/9/scheme.png

5

Re: Виручайте мені потрібно адаптувати текс на картинці

gameoniu886 написав:

Всім привіт мені потрібно адаптувати текст на картинці, таким образом, щоб коли розширення екрану змінювалос змінювалося росположення тексту

Примерно це виглядає так

<div>
<div class="size"> 2000 </div>
<img scr="">
</div

<style>
.size{
left: 100px;
top: 50px;
}
</style

Але я хочу щоб картинка і сам текс не міняли росположеніє коли різні види екрану!

щоб коли розширення екрану змінювалос змінювалося росположення тексту

Використовуйте щось типу margin : 0 auto; а для продвинутих флекси.

щоб картинка і сам текс не міняли росположеніє коли різні види екрану!

Хотів запропонувати

@media 

але які ще види екрану? типу телефон незалежно від розширення?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Побудова речень/думок корява, слова криві.. вам би розібратись що вам потрібно(увійти в тему)

6

Re: Виручайте мені потрібно адаптувати текс на картинці

vitek написав:
gameoniu886 написав:

Всім привіт мені потрібно адаптувати текст на картинці, таким образом, щоб коли розширення екрану змінювалос змінювалося росположення тексту

Примерно це виглядає так

<div>
<div class="size"> 2000 </div>
<img scr="">
</div

<style>
.size{
left: 100px;
top: 50px;
}
</style

Але я хочу щоб картинка і сам текс не міняли росположеніє коли різні види екрану!

щоб коли розширення екрану змінювалос змінювалося росположення тексту

Використовуйте щось типу margin : 0 auto; а для продвинутих флекси.

щоб картинка і сам текс не міняли росположеніє коли різні види екрану!

Хотів запропонувати

@media 

але які ще види екрану? типу телефон незалежно від розширення?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Побудова речень/думок корява, слова криві.. вам би розібратись що вам потрібно(увійти в тему)

Розмір екрану компютерної версії і мобільної версії. Як для андроїд так і для IOS
Через @media були спроби тільки в мене не получалось

7

Re: Виручайте мені потрібно адаптувати текс на картинці

gameoniu886 написав:

Мені потрібно щоб при зменшенні екрану зменшувався текст разом із фотографією. У тих місцях, у яких вони тепер перебувають

якщо мається на увазі розширення то @media  вам допоможе

8

Re: Виручайте мені потрібно адаптувати текс на картинці

Через @media були спроби тільки в мене не получалось

давайте приклад, коду і бажано як виглядить

9

Re: Виручайте мені потрібно адаптувати текс на картинці

vitek написав:
gameoniu886 написав:

Мені потрібно щоб при зменшенні екрану зменшувався текст разом із фотографією. У тих місцях, у яких вони тепер перебувають

якщо мається на увазі розширення то @media  вам допоможе


$atexpi .='
                <div id="input-'.$input_one_id.'" class="input-'.$input_one_id.'">'.$input_one_value['value_start'].'</div>
            ';
<div class="">
                        <img class="col-md-7 scheme" src="/upload-files/calc/{$calc_rez['cat_id']}/scheme.png" style="margin-bottom: 30px;" />
                        <!--<div class="config-text">
                            {$atexpi}
                        </div>-->
                    </div>
@media screen and (max-width: 1920px) {
.input-height2{
    position: absolute;
    left: 55px;
    top: 235px;
}

.input-width2{
    position: absolute;
    left: 300px;
    top: 455px;
}
}

https://wave.glass/upload-files/calc/9/scheme.png

А пример мені потрібно так як тут https://www.weston.com.ua/calculator/wk1
Тільки потрібно нажати оформити замовлення

10 Востаннє редагувалося vitek (29.09.2023 15:47:08)

Re: Виручайте мені потрібно адаптувати текс на картинці

в мене лише базові знання з фронтенду, і я точно не знаю що це $atexpi  ДжейКвері?
у вас лише один @media, якщо у вас екран "не перетинає" цю умову то і змін не відбувається.

11

Re: Виручайте мені потрібно адаптувати текс на картинці

vitek написав:

в мене лише базові знання з фронтенду, і я точно не знаю що це $atexpi  ДжейКвері?
у вас лише один @media, якщо у вас екран "не перетинає" цю умову то і змін не відбувається.


$atexpi свтворює 2 input із бази mysql і пітягує назву
Я створи <div class="по назві із бази даних по методу $atexpi"
Більш детально можна розглянути можна на сайті https://wave.glass/ua/calc/stefania#calc
Де можна нажати кнопку замовити навести на картинку і відкрити посмотреть код
І розкоментірувати <div class="config-text">

12

Re: Виручайте мені потрібно адаптувати текс на картинці

gameoniu886 написав:
vitek написав:

в мене лише базові знання з фронтенду, і я точно не знаю що це $atexpi  ДжейКвері?
у вас лише один @media, якщо у вас екран "не перетинає" цю умову то і змін не відбувається.


$atexpi свтворює 2 input із бази mysql і пітягує назву
Я створи <div class="по назві із бази даних по методу $atexpi"
Більш детально можна розглянути можна на сайті https://wave.glass/ua/calc/stefania#calc
Де можна нажати кнопку замовити навести на картинку і відкрити посмотреть код
І розкоментірувати <div class="config-text">


Там все вистроїться як повино бути, але коли ми змінемо екран під 320х320 то воно не буте так як при 1920 - 1280 - 720