Jump to content
  • 0

Как растянуть div


SnowWind
 Share

Question

3 answers to this question

Recommended Posts

  • 0

В этом случае никак. Для начала вам надо определиться под какие браузеры вы хотите получить работоспособность. А затем, в зависимости от того какие вы выбрали использовать:

1) display: table;/display: table-cell;
2) display: flex;
3) JavaScript
4) хаки

Link to comment
Share on other sites

  • 0

Если топик-стартер не против, то спрошу в его теме (дабы не плодить новых).

Есть хтмл с height:100% и max-width:1000px; , в нем есть два дива во флекс контейнере, у этих контейнеров есть бекграунд картинки размерами 700*200px.

 

Необходимо, чтобы на экране >1000px эти два блока занимали по 50% ширины флекс обертки (500px) и высоте равной пропорционально уменьшенной высоте фоновой картинки. А если размер экрана тянут вниз, то соответственно масштабировались дивы в сторону уменьшения.  

 

В центре этих блоков тексты из двух слов у каждого, они же ссылки. 
 

В первую очередь интересна возможность на чистом CSS, потом уже скриптовая (если единственно возможный вариант). 

Как только уже не изощрялся, в ширину нормально растягивает фон, и пропорционально уменьшается как нужно. Но упорно дивы не хотят растягиваться фоновыми изображениями, ни через contain  ни через cover. Если выставляю фиксированную высоту, тогда да, но в этом случае блоки не масштабируются. Если min max, то уменьшается картинка до размера текста. 

Как заставить див растянуть свою высоту по размеру высоты фонового изображения без статических единиц?

 

PS Пока единственный вариант это задавать тексту в блоке падинги в %, предварительно подобрав примерные значения для получения нужной высоты. 

Edited by Highlander
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy