0

In the situation, In the same row, i have word in the left and image in the right. The problem is when i try to resize the browser, the image div will scale small(the width and height will adjust smaller) but the word div will not scale small at the same time. (the word div just resize the width but the same height) How can i fix it properly?

http://codepen.io/anon/pen/ALRZGa

  <div class=container>
   <div class="word">
   <h1>Hello</h1>
   </div>

   <div class=picture>
   <figure> <img src="...">
   </div>
  </div>
Kindess
  • 49
  • 6
  • can you create a minimal simplified example showing the problem? – kukkuz Sep 27 '16 at 15:50
  • That depends on the styles. I'll bet you have a width in % for the img. If that's what you want for the word too, use a font-size in vw. – Mr Lister Sep 27 '16 at 15:51
  • Possible duplicate: [http://stackoverflow.com/questions/14431411/pure-css-to-make-font-size-responsive-based-on-dynamic-amount-of-characters](http://stackoverflow.com/questions/14431411/pure-css-to-make-font-size-responsive-based-on-dynamic-amount-of-characters) – charly3pins Sep 27 '16 at 15:54
  • i cannot use the height:100% or auto. I have to make the fixed height (eg. 500px for the word div) so it cannot be scale properly. how can i do – Kindess Sep 27 '16 at 15:54
  • You have to make the sample on jsfiddle or on codepen, so everyone can understand what is wrong. – Jen Sep 27 '16 at 15:57
  • update with code pen – Kindess Sep 27 '16 at 16:02
  • I just want to resize the browser (scale small the picture div and word div at the same time) scale both width and height. The key problem should be the fixed height of word div – Kindess Sep 27 '16 at 16:03
  • the word div h1 is absolutely positioned... hence won't resize on browser resize... also the word div is over the image and they are not side by side as per your question... – kukkuz Sep 27 '16 at 16:16

0 Answers0